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

我正在使用fullpage.js设计一个类似于旋转木马的完整页面站点。我面临的问题是，当节的内容（

参见#section-1

，节从

section-0

开始）扩展到视口之外时，如何实现响应功能

我想要什么？

最初，我想使用

scrollOverflow:true

，但这似乎不起作用。它莫名其妙地在中途切断（隐藏）了我的元素。我在其他帖子中读到，作者不鼓励使用它。然后我使用了

respondsiveWidth

，将其设置为

980

，因为如果窗口的大小调整或加载宽度小于980px，我希望响应模式启动。滚动条可以很好地处理这个问题，但是剖面的高度保持不变，即一个完整的视口。我想要的是，本节扩展并容纳其全部内容

我试过什么？

• 我已将类

  fp auto height

  和

  fp auto height responsive

  添加到特定部分（

  #section-1

  ），但这没有任何作用，（我还有一个包含该类的页脚，其大小小于视口）
  • 我尝试了以下代码：

afterResize:function（）{
如果（（窗口）。宽度<980）{
控制台日志（“980”）；
$（“第1节”）.addClass（“fp自动高度响应”）；
}
}

我尝试了CSS：

#第1节，
#第1节fp幻灯片，
#第1节fp表格单元{
高度：自动！重要；
最小高度：100%；
}

我还在CSS中声明了一个单独的类，添加了上述属性，并在javascript文件中执行了

addClass

if

window.width<980

我所做的一切似乎都不管用，我正处于神经崩溃的边缘

我们将不胜感激

我想要的是，这一部分扩展并容纳它的 全部内容

这就是

fp auto height responsive

的用途

您可能没有正确使用它。您不必动态添加它，只需将其添加到您不希望fullPage.js限制维度的部分即可

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

对我来说工作正常。触发responsive时，蓝色部分不会获得视口大小，文本也不会被剪切

---

如果你要求你的第二部分，那是完全正常的。您正在使用一个

固定的
元素。与使用
绝对值
时相同。在这种情况下，fullPage.js无法为您提供任何帮助。fullPage.js只停止限制节的维度，这意味着它将采用其他维度。在您的情况下，任何固定或绝对定位的元素都不会强制更改其父元素的高度。
我在`#第1节中确实有
fp auto height responsible
。这样做确实会增加特定截面的高度，但它似乎与后续截面重叠。请参见：和。“有办法把它们推倒吗？”斯诺我已经回答了你为什么会这样。阅读我的全部答案。我没有其他要添加的内容。即使在我删除了所有具有固定位置的元素之后，它也不起作用。@snow您必须通过复制来证明这一点。在同一个演示（现已更新）中，在第71行，我已经注释掉了#标题的固定位置。#loader仍然有固定的位置，但这超出了#fullpage（我也尝试过对其进行注释）。