Question

分割结束后页脚丢失。

<div id="fullpage">
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
</div>
<footer> this is my footer </footer>

这是我的脚本

<script type="text/javascript">
  $(document).ready(function() {    
     $('#fullpage').fullpage({
        verticalCentered: false,
        resize : true,
        easing: 'easeInQuart',
        navigation: true,
        navigationPosition: 'right',
        scrollOverflow: false,
     });    
  });
</script>

我使用整页js滚动工作正常但页脚没有显示。

Answer 1

默认情况下，整页不支持您尝试过的页脚解决方案。我对原始的fullpage.js做了一个简单的扩展，它支持这个。

            if (v.anchorLink == 'footer')
            {
                footer_a = $('#section-footer').height();
                footer_h = $('#footer-text').height();
                var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)';
            }
            else
            {
                var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
            }

您可以尝试：link

页脚高度由其中的文本计算。

Answer 2

您的小提琴看起来与原始问题中发布的代码不同，但答案仍应适用。

更改您的css：

#footer{
    bottom:0px;
}

要：

#footer{
    position: fixed;
    bottom:0;
}

http://jsfiddle.net/GUTBA/

编辑 - 上面会将页脚固定到所有部分的页面底部。如果要求是在最后一张幻灯片后显示，则需要执行以下操作之一：

如果页脚是固定高度 将css更改为：

#footer{
    bottom: 20px;
    height: 20px;
    position: relative;
}

http://jsfiddle.net/vU5hY/

这会在滑动后将页脚从其位置向上移动一个等于其高度的数量。

如果页脚高度不固定 将css更改为：

#footer{
    bottom: 0;
    position: absolute;
}
.section {
    position: relative;
    text-align: center;
}

将HTML更改为：

<div class="section" id="section3">
    <div class="sectionContent">
        <h1>Section 3</h1>
    </div>
    <div id="footer">Footer</div>
</div>

http://jsfiddle.net/CKGQ5/

将页脚移动到最后一张幻灯片中，将容器设置为position：relative;所以当我们将页脚设置为position：absolute;它相对于它定位。

Answer 3

如果您使用fullpage.js 2.7.1的新功能，则可以执行此操作。（自动高度部分）

查看in the documentation

这里有an example online。滚动到最后一部分。

Answer 4

我有一个非固定的页脚在全页div外面。当我尝试上面的css代码用于固定高度的页脚时，它导致页脚下方的额外空间等于“底部”属性中设置的高度（在上面的例子中，为20px）。

但是，使用以下代码不会占用额外的空间，并且可以用于可变高度的页脚：

.footer {
    padding: 30px 0;
    bottom: 75px;
    margin-bottom: -75px;
    position: relative;
}

页脚没有显示在div幻灯片的末尾

4 个答案: