javascript - 如何使部分足够高以存储数据(fullpage.js)？

Question

我遇到了部分问题。节内的文本溢出它。我不明白这一点，因为通常情况下，当您禁用自动滚动时，数据会被该部分包裹。我下载了fullpage demo并用大量文本填充它。节换行文本。我的代码是:

HTML:

<div class="jumbotron about-section section" id="section1">

    <p>lorem ipsum ...
    </p>

</div>

CSS:

.about-section{
    background: url(../img/text_bg_sm.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: ProximaNovaLight;
    font-size: 20px;
    padding-top: 90px;
}
        .about-section p span{
            font-family: ProximaNovaRegular;
        }

JS:

<script src="js/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
    $(document).ready(function(){
        if( $(window).width() > 900 ){
             $('#fullpage').fullpage({
                 autoScrolling: true,
                 menu: "#menu",
                 css3: true,
                 anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
                 responsive: 900,
                 resize: false
             });
        } else {
            $('#fullpage').fullpage({
                 autoScrolling: false,
                 menu: "#menu",
                 css3: true,
                 anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
                 responsive: 900,
                 verticalCentered: true,
                 resize: false
             });
        }
    });
</script>

试图关闭 jumbotron，根本不启动，只留下 section 类。结果保持不变。

这就是我的意思:我的情况:在这张图片中，您可以看到文本如何从深色背景部分流出到白色背景部分。

fullpage.js 插件的创建者如何做到这一点:我创建了 20 个“保持简单”的标志，最后一部分延伸到它的内容高度。 (响应演示)

Answer 1

I downloaded fullpage demo and filled it with loads of text. Section wraps the text. My code is:

在演示页面中，它与您提到的完全一样。这些部分仍然具有固定的高度，并且隐藏了溢出的文本。

由于 fullPage.js 设置内联样式的部分大小，您可以使用 CSS 的属性 !important 覆盖它。

.section{
    height: auto !important;
}

Living demo