html - 在 fullpage.js 中设置部分的高度

Question

我正在使用 fullPage.js 这听起来可能很笨，但不知道如何将一个部分的高度设置为小于 100%，我尝试使用 .section 和 #section1 在 css 中设置它(例如。height: 80%;)，但这没有任何效果......

非常感谢。

最大

Answer 1

同样的问题was answered in the plugin's github issues forum .

This is a FULL PAGE plugin. There's no such option

这不是插件提供的选项。 如果你想做，你需要自己做。可能是在插件呈现后(在 afterRender 回调上)和调整大小后(afterResize)覆盖部分和幻灯片的 height 属性).

您也可以通过添加 CSS 样式来进行尝试，添加如下内容:

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

更新

现在 fullpage.js 提供了一种方法来创建比视口(viewport)更小的部分(或者在使用 autoScrolling:false 或 scrollBar:true 时甚至更大。

在每个部分添加类 fp-auto-height 将按规定执行 in the documentation .

更新 2

fp-auto-height 不允许您使用百分比，但有一个扩展可以让您使用百分比。 Offset Sections . 它还允许您在视口(viewport)中间显示部分，显示前一个和下一个部分。