我正在使用 fullpage.js 来设计一个像网站一样的全页轮播。我面临的问题是当部分内容(see #section-1，部分从 section-0 开始)扩展到视口(viewport)之外时实现响应功能。
我想要什么？
最初，我想选择 scrollOverflow: true但这似乎没有用。它莫名其妙地在中途切断(隐藏)了我的元素。我在其他帖子中读到作者不鼓励使用它。然后我用了 respondsiveWidth , 将其设置为 980因为我希望在调整窗口大小或以小于 980 像素的宽度加载时启动响应模式。滚动条可以正常工作，但该部分的高度保持不变，即一个完整的视口(viewport)。我想要的是该部分扩展并容纳其全部内容。
我尝试了什么？
- 我已经添加了类
fp-auto-height和fp-auto-height-responsive到特定部分 (#section-1) 但那没有做任何事情，(我也有一个具有类的页脚，它的大小小于视口(viewport))- 我尝试了以下代码:
afterResize: function(){
if((window).width < 980) {
console.log("980");
$("#section-1").addClass("fp-auto-height-responsive");
}
}
我尝试使用 CSS:
#section-1,
#section-1 .fp-slide,
#section-1 .fp-tableCell{
height: auto !important;
min-height: 100%;
}
我还在 CSS 中声明了一个单独的类，添加了上述属性并做了 addClass如果window.width is < 980在我的 javascript 文件中。
我所做的一切似乎都无济于事，我正处于精神崩溃的边缘。
帮助将不胜感激。
最佳答案
What i want is that this section to extend and accommodate its the entire contents.
这就是 fp-auto-height-responsive 的用途。
您可能没有正确使用它。您不必动态添加它，只需将它添加到您不希望 fullPage.js 限制尺寸的部分。
<div class="section fp-auto-height-responsive" id="section-1">
Your demo对我来说工作正常。当响应被触发时，蓝色部分不会获得视口(viewport)大小，文本也不会被剪切。
如果您要的是第二部分，那是完全正常的。您正在使用 fixed 元素。与使用 absolute 相同。在这些情况下，fullPage.js 无能为力。 fullPage.js 仅停止限制该部分的尺寸，这意味着它将采用其他方式采用的任何尺寸。在您的情况下，任何固定或绝对定位的元素都不会强制其父级高度发生变化。
关于javascript - 响应式 fullpage.js : increase viewport to display full content，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39991589/