更新

Question

我正在使用fullPage.js 这可能听起来非常苛刻，但无法确定如何将某个部分设置为高度低于100％，我已尝试使用.section和#section1在css中进行设置（例如。height: 80%;），但这没有效果......

非常感谢。

最高

Answer 1

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

这是一个FULL PAGE插件。没有这样的选择

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

您也可以通过添加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。它还允许您显示视口中间的部分，显示上一个和下一个部分。

Answer 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;
}

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

在fullpage.js中设置section的高度

2 个答案:

更新

更新2