响应式 fullpage.js：增加视口以显示完整内容
Responsive fullpage.js: increase viewport to display full content
我正在使用 fullpage.js 来设计一个像网站一样的全页轮播。我面临的问题是当部分内容（see #section-1，部分从 section-0 开始）扩展到视口之外时实现响应功能。
我想要什么？
最初，我想使用 scrollOverflow: true，但似乎行不通。它莫名其妙地在中途切断（隐藏）了我的元素。我在其他帖子中读到作者不鼓励使用它。然后我使用 respondsiveWidth，将其设置为 980，因为我希望在 window 调整大小或以小于 980px 的宽度加载时启动响应模式。滚动条可以正常工作，但该部分的高度保持不变，即一个完整的视口。我想要的是这个部分扩展并容纳它的全部内容。
我尝试了什么？
- 我已将 class
fp-auto-height 和 fp-auto-height-responsive 添加到特定部分 (#section-1) 但这没有任何作用，(我也有一个带有 class 的页脚，它的大小小于视口 ）
- 我尝试了以下代码：
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 中声明了一个单独的 class，添加了上述属性并在我的 javascript 文件中做了一个 addClass if window.width is < 980。
我所做的一切似乎都无济于事，我正处于精神崩溃的边缘。
我们将不胜感激。
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 对我来说工作正常。触发响应时，蓝色部分不会获得视口大小，文本也不会被剪切。
如果您要的是第二部分，那是完全正常的。您正在使用 fixed 元素。与使用 absolute 相同。在这些情况下，fullPage.js 无能为力。 fullPage.js 仅停止限制部分的尺寸，这意味着它将采用其他方式采用的任何尺寸。在您的情况下，任何固定或绝对定位的元素都不会强制其父元素高度发生变化。
我正在使用 fullpage.js 来设计一个像网站一样的全页轮播。我面临的问题是当部分内容（see #section-1，部分从 section-0 开始）扩展到视口之外时实现响应功能。
我想要什么？
最初，我想使用 scrollOverflow: true，但似乎行不通。它莫名其妙地在中途切断（隐藏）了我的元素。我在其他帖子中读到作者不鼓励使用它。然后我使用 respondsiveWidth，将其设置为 980，因为我希望在 window 调整大小或以小于 980px 的宽度加载时启动响应模式。滚动条可以正常工作，但该部分的高度保持不变，即一个完整的视口。我想要的是这个部分扩展并容纳它的全部内容。
我尝试了什么？
- 我已将 class
fp-auto-height和fp-auto-height-responsive添加到特定部分 (#section-1) 但这没有任何作用，(我也有一个带有 class 的页脚，它的大小小于视口 ）- 我尝试了以下代码：
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 中声明了一个单独的 class，添加了上述属性并在我的 javascript 文件中做了一个 addClass if window.width is < 980。
我所做的一切似乎都无济于事，我正处于精神崩溃的边缘。
我们将不胜感激。
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 对我来说工作正常。触发响应时，蓝色部分不会获得视口大小，文本也不会被剪切。
如果您要的是第二部分，那是完全正常的。您正在使用 fixed 元素。与使用 absolute 相同。在这些情况下，fullPage.js 无能为力。 fullPage.js 仅停止限制部分的尺寸，这意味着它将采用其他方式采用的任何尺寸。在您的情况下，任何固定或绝对定位的元素都不会强制其父元素高度发生变化。