如何使section足够高以存储数据（fullpage.js）？ [英] How to make section be tall enough to store data (fullpage.js)?

问题描述

我有部分的问题。段内的文本溢出它。我不明白这一点，因为，通常，当您禁用自动滚动，数据被包装的部分。我下载了

I got a problem with sections. The text inside of section, overflows it. I don't understand this because, normally, when you disable autoScrolling, data is wrapped by the section. I downloaded fullpage demo and filled it with loads of text. Section wraps the text. My code is:

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>

Tried to turn off jumbotron, bootstrap at all, leave only section class. Result remains the same.

This is what i mean : My case: At this picture you can see how text flows out from section with dark background to section with white background.

How creator of fullpage.js plugin do this : I created 20 "Keep it simple" signs and the final section stretched to it's content height. (Responsive demo)

解决方案

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

In the demo page it happens exactly the same as you mention. The sections still having the fixed height and the overflowing text is being hid.

As fullPage.js sets the size of the sections on an inline style, you can overwrite it as far as you use the property !important of CSS.

.section{
    height: auto !important;
}

Living demo

这篇关于如何使section足够高以存储数据（fullpage.js）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！