fullpage.js 的奇怪底部区域答案

【问题标题】：Weird bottom area from fullpage.jsfullpage.js 的奇怪底部区域
【发布时间】：2016-05-31 17:09:55
【问题描述】：

现在我尝试通过 fullpage.js 插件制作我的网站。

https://github.com/alvarotrigo/fullPage.js#callbacks

但是该部分内有一个奇怪的底部区域，其内容长于其部分高度。（有scrollOverflow的部分）

像这样。

这是我的代码。

$(document).ready(function() {
    $('#fullpage').fullpage({
        'navigation': true,
        paddingTop: '0',
        paddingBottom: '0',
        scrollOverflow: true,
        afterLoad: function(anchorLink, index){
            //using anchorLink
            if(anchorLink == 'grey-fade-bg-slide'){
                //alert("eoaehou");
                $("body").css("background-image","url('img/team-bg.jpg')");
            }

            if(anchorLink == 'banner-slide'){
                //$("#map").css("height","120px");
                if(window.location.href.indexOf("our-team-bg-slide") > -1 || window.location.href.indexOf("contact-us-bg-slide") > -1 ) {
                    //alert("ccccc");
                    $("body").css("background-image","url('img/team-bg.jpg')");
                }
            }

            if(anchorLink == 'blue-bg-slide'){
                //alert("eoaehou");
                $("body").css("background-image","url('img/banner-bg-image.jpg')");
            }
        },
        afterRender: function(){
            initMap();
            $(".our-team-bg-section h3").css("margin-top","120px");
            $(".contact-us-bg-section h3").css("margin-top","60px");
            $(".grey-fade-bg-section h3").css("margin-top","120px");
        }

    });
});

我包含的所有 js 文件。

<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/scrolloverflow.min.js" type="text/javascript"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
<script src="js/jquery.easings.min.js" type="text/javascript"></script>

那么有人知道如何解决这个问题吗？谢谢！

【问题讨论】：

在我看来，上面的地图不适合单个屏幕，所以它被拆分到新幻灯片上。
是的，内容比单个屏幕大，所以我打开了 scrollOverflow，因为它们可以只在一个屏幕上滚动，但它仍然比它应该的长。
您是否包含文档中指示的外部 scrolloverflow.js 库？您与我们分享的内容不够多，所以我们真的没有办法提供帮助，只是猜测。
是的，我编辑了代码。

标签： javascript css fullpage.js

【解决方案1】：

您应该使用fp-auto-height 类，详细说明in the fullpage.js docs。

查看demo online 或in codepen。

<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>

【讨论】：

我不知道为什么，但是当我停止使用他们的 .css 并使用他们的 .scss 时，一切都解决了。