在非全屏元素上使用 fullPage.js 插件？

【问题标题】：Use fullPage.js plugin on a non-fullscreen element?在非全屏元素上使用 fullPage.js 插件？
【发布时间】：2015-11-27 10:50:38
【问题描述】：

我的页面上有一个元素，该元素从页面顶部的 100 像素延伸到底部的 200 像素。它是页面宽度的 100%。

我想以幻灯片的形式在其中包含内容，以便可以使用fullPage.js 滑动它们。问题是这个元素不会占据整个页面，而 fullPage.js 需要元素占据整个页面。

有没有办法解决这个问题？

【问题讨论】：

【解决方案1】：

您总是可以通过执行以下操作来覆盖内联样式：

.section{
   height: auto !important;
}

您可以尝试使用 fp-auto-height provided by fullpage.js 类并在您的部分中使用它：

<div class="section fp-auto-height">

这样，这些样式将应用于该部分：

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

该类的目的通常是处理小于视口的部分，例如页脚。但如果您愿意，也可以将其用于更大的部分。

【讨论】：