【问题标题】：Set height of section in fullpage.js在 fullpage.js 中设置部分的高度
【发布时间】：2014-10-02 19:05:18
【问题描述】：

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

非常感谢。

最大

【问题讨论】：

标签： html css height fullpage.js

【解决方案1】：

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

这是一个 FULL PAGE 插件。没有这个选项

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

您也可以通过添加 CSS 样式来尝试它，添加如下内容：

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

更新

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

在每个部分添加fp-auto-height 类将按照in the documentation 的说明进行。

更新 2

fp-auto-height 不允许您使用百分比，但有一个扩展程序可以为您提供这种可能性。 Offset Sections。它还允许您在视口中间显示上一个和下一个部分的部分。

【讨论】：

能否请您将答案的链接更新为现在：github.com/alvarotrigo/… 谢谢！我投了赞成票！

【解决方案2】：

这是我想出的，我改变了

$(window).height();

到 var windowsHeight = $('.universal-container').height();

假设我们有 4 个 div

<div class="main-container">
<div class= "1st-div-holder">
</div>
<div class= "2nd-div-holder">
    <div class= "section">
        <div class= "universal-container">

    </div>
   </div>
  </div>
</div>

现在在我们的 css 上我们可以做这样的事情

.main-comtainer{
width:100%;
height:100%;
}


.1st-div-holder{
height:10%;
width:100%;
position:fixed;
}

.2nd-div-holder{
height: 90%;
position: absolute;
bottom: 0;
}

这样高度会自动拾取而不占用整个窗口。

【讨论】：