响应式 fullpage.js：增加视口以显示完整内容。

Question

我正在使用fullpage.js设计一个全屏轮播网站。我遇到的问题是当某个部分的内容（请参见＃section-1，部分从section-0开始）扩展到视口外时，实现响应式功能的问题。

我想要什么？

最初，我想使用scrollOverflow: true，但似乎不起作用。它莫名其妙地截断（隐藏）了我的元素。我在其他帖子中读到作者不鼓励使用它。然后我使用了respondsiveWidth，将其设置为980，因为我希望在窗口调整大小或以小于980px的宽度加载时启动响应式模式。滚动条与此一起正常工作，但是该部分的高度仍然相同，即一个完整的视口。我想要的是这个部分扩展并容纳其整个内容。

我尝试了什么？

• 我已经将类fp-auto-height和fp-auto-height-responsive添加到特定的部分（#section-1），但没有任何作用，（我还有一个具有该类的页脚，其大小小于视口）
• 我尝试了以下代码：

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中声明了一个单独的类，添加了上述属性，并在我的javascript文件中如果window.width is < 980则进行了addClass。

Codepen

我所做的一切似乎都不起作用，我快要崩溃了。

帮助将不胜感激。

- snow

Answer 1

我希望这个部分能够扩展并容纳它的所有内容。

这就是 fp-auto-height-responsive 的作用。

你可能没有正确使用它。你不需要动态添加它，只需将其添加到你不想让 fullPage.js 限制尺寸的部分即可。

<div class="section fp-auto-height-responsive" id="section-1">

你的演示 对我来说正常工作。当响应式触发时，蓝色部分不会得到视口大小，文本也不会被截断。

如果您是在询问第二部分，那么这是完全正常的。您正在使用一个固定的元素。与使用绝对定位相同。在这些情况下，fullPage.js 无法为您做任何事情。 fullPage.js 只会停止限制部分的尺寸，这意味着它将采用它本来应该采用的任何尺寸。而在您的情况下，任何固定或绝对定位的元素都不会强制其父元素的高度改变。

- Alvaro

---

我在#section-1上实际上使用了fp-auto-height-responsive。这样做确实会增加特定部分的高度，但似乎被后续部分重叠。请参见：http://imgur.com/a/SlIUz和http://imgur.com/a/0IewG。有没有办法将它们向下推？ - snow

@snow 我已经回答了你为什么会发生这种情况。请阅读我的完整回答。我没有其他要补充的。 - Alvaro

即使我删除了所有具有固定定位的元素，它仍然无法正常工作。 - snow

在同一个演示中（现已更新），我已经在第71行注释掉了#header的固定定位。#loader仍然具有固定定位，但它在#fullpage之外（我也尝试过将其注释掉）。 - snow

我和OP有完全相同的问题。在桌面端，添加 fp-auto-height 对我的页脚部分（小于视口高度）起作用，但在移动设备上它会裁剪页脚部分的内容并且不允许我滚动该部分的内容。另一方面，fp-auto-height-responsive 在移动设备上表现得很好（可以滚动页脚部分的内容），但在桌面端它将页脚部分设置为100％的视口高度。我尝试了许多组合，但都没能解决问题。动态更改类名也不起作用。 - an0o0nym