如何在固定高度和固定宽度的 div 中包含 fullscreen.js 幻灯片

Question

默认情况下，编写 fullpage.js 的任何示例以在屏幕的最大高度和宽度（全屏）处呈现幻灯片。

但是，我试图在我的 html 页面中将幻灯片包含在一个固定大小的 div 中。我有一个固定高度和固定宽度的 div，并希望 fullpage.js 幻灯片在该 div 中播放。我试过了，但我无法将高度降低到规定的固定高度。固定宽度工作正常。

<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

如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-table

演示：http://jsfiddle.net/IrvinDominin/o46332j6/

更新

前段时间 fullpage.js 包含一个选项，可以使用 fp-auto-height 类创建更小或更大的部分。

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

演示：http://jsfiddle.net/IrvinDominin/o46332j6/2/