Fullpage.js : 部分的高度高于内容

Question

我目前正在使用 Bootstrap 和 fullpagejs 开发单页网站：

我遵循了要求的 HTML 结构，但我网站的每个部分都有一个巨大的高度。所以这些部分与其内容不符。

我注意到如果我添加 fp-auto-height class，一切正常。内容与章节相符。但这不是正确的方法。

我不知道会发生什么。

例如，这是我的第一部分

<div id="fullpage">
    <!-- section 1 begin -->
    <div data-anchor="p1-a" class="section">
        <div class="container-fluid">
            <div id="p1" class="row vertical-align">
                <div class="col-md-offset-5 col-md-6">
                    <div class="row">
                        <div class="col-xs-12">
                         <h1 id="title-p1" class="reduce-space text-center">ANTHONY<span style="color: #E28509;">ROANI</span></h1>
                     </div>
                 </div> <!-- end row title intro -->
                 <div class="row">
                    <div class="col-md-6">
                        <p class="intro-text">
                           ...
                        </p>
                    </div><!-- end left intro -->
                    <div class="col-md-6">
                        <p class="intro-text">
                           ...
                        </p>
                    </div> <!-- end right intro -->
                    <div class="container-fluid">
                        <i class="intro-text"> ...</i>
                        <p class="intro-text">- Luc Fayard </p>
                    </div><!-- end citation intro -->
                </div> <!-- end row content text intro -->
            </div> <!-- end colonnes + offset page 1 -->
        </div><!-- end bigrow page 1 -->
    </div>
</div> <!-- SECTION 1 END -->

[... other sections]
</div> <!-- end fullpage -->

Answer 1

确保您没有忘记在文档的开头添加强制性的 <!DOCTYPE html> 声明，详见 this tutorial。

例如：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Demo
    </body>
</html>

任何网站都需要Doctype。

Fullpage.js : 部分的高度高于内容

Fullpage.js : Sections have higher height than content

html

javascript

fullpage.js