页脚不显示在 div 幻灯片的末尾答案

【问题标题】：The footer Doesn't show at the end of div slide页脚不显示在 div 幻灯片的末尾
【发布时间】：2014-06-26 06:45:57
【问题描述】：

分割结束后页脚丢失。

<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滚动工作顺利，但页脚不显示。

【问题讨论】：

浏览器？哪个版本？它在IE<9 中不起作用，供您参考，id 在valid HTML 中必须是唯一的
当我在 fiddle 中复制你的代码时它正在工作。所以它可能是一些 css 问题
整页插件有什么作用？
这是我以前有滚动功能的插件alvarotrigo.com/fullPage/#3rdPage
你能提供类部分的 CSS 吗？？

标签： jquery html css fullpage.js

【解决方案1】：

默认情况下，fullpage 不支持您尝试的此页脚解决方案。我对原来的 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

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

【讨论】：

【解决方案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: absolute;它是相对于它定位的。

【讨论】：

很抱歉，但几乎一样。无论如何，我不希望页脚被修复。我看到一些网站可以在滚动 4 张幻灯片后添加页脚。
所以您只希望页脚出现在最后一张幻灯片之后，而不是之前的页脚？
应该是，页脚可以设置高度吗？
建议的解决方案有帮助吗？

【解决方案3】：

如果您使用 fullpage.js 2.7.1 的新功能，您可以做到这一点。（自动高度部分）

查看in the documentation

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

【讨论】：

【解决方案4】：

我在整页 div 之外有一个非固定页脚。当我为固定高度的页脚尝试上述 css 代码时，它导致页脚下方的额外空间等于“底部”属性中设置的高度（在上述情况下为 20 像素）。

但是使用下面的代码不会增加额外的空间，它可以用于可变高度的页脚：

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

【讨论】：