How to make section be tall enough to store data (fullpage.js)?

Question

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)

Answer 1

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