How to hide fullscreen.js sliders in a fixed height and fixed width div

Question

By default, any fullpage.js example is written to display slides at the maximum height and width of the screen (full screen).

However, I am trying to hide slides in one fixed size div on my html page. I have a fixed height and a fixed width, and I would like fullpage.js slides to play inside this div. I tried, but I cannot force the height to be reduced to a given fixed height. Fixed width works great.

<div id="fullpage" style="height: 40px; max-height:200px; width: 500px;">
    <div class="section " id="section0">
        <div class="intro">
            <h1>Responsive</h1>
            <p>This example will turn to normal scroll when the window size gets smaller than 600px height</p>
        </div>
    </div>
    <div class="section" id="section1">
        <div class="slide" id="slide1">
            <div class="intro">
                <h1>Ideal for small screens</h1>
            </div>
        </div>
        <div class="slide" id="slide2">
            <h1>This example uses responsiveHeight: 600</h1>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>Keep it simple!</h1>
        </div>
    </div>
</div>

Answer 1

As indicated here :

FULL PAGE. .

CSS.

:

$('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    css3: true,
    verticalCentered:false
});

CSS

#section0, #section1, #section2 {
    height: auto !important;
}

verticalCentered: false. fp-

: http://jsfiddle.net/IrvinDominin/o46332j6/

Update

fullpage.js fp-auto-height.

: https://github.com/alvarotrigo/fullPage.js#creating-smaller-sections

: http://jsfiddle.net/IrvinDominin/o46332j6/2/