Bootstrap 中的固定页脚答案

【问题标题】：Fixed footer in BootstrapBootstrap 中的固定页脚
【发布时间】：2013-10-20 06:28:44
【问题描述】：

我正在尝试Bootstrap，但我想知道，如果滚动内容，如何修复底部的页脚而不使其从页面中消失？

【问题讨论】：

【解决方案1】：

要获得一个贴在视口底部的页脚，请给它一个固定的位置，如下所示：

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap 在 Navbar > Placement 部分中包含此 CSS，其类为 fixed-bottom。只需将此类添加到您的页脚元素：

<footer class="fixed-bottom">

引导文档：https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

【讨论】：

这和@Daniel-Tero 的评论为我做了。
如果页面有滚动，说明它不能正常工作。
fixed-bottom 没有达到我的预期，我改为 static-bottom 以尊重页面内容高度。
如果页面的正文足够高，可以包含滚动内容，则正文与页脚重叠。如何防止这种重叠？
给页脚一个不透明的背景颜色和一个边框顶部，这样页脚就会一直显示，你可以滚动足够远，所以所有的内容都会出现在你的页脚上方跨度>

【解决方案2】：

添加这个：

<div class="footer navbar-fixed-bottom">

https://stackoverflow.com/a/21604189

编辑： 自 Bootstrap v4-alpha.6 起，navbar-fixed-bottom 类已更改为 fixed-bottom。

http://v4-alpha.getbootstrap.com/components/navbar/#placement

【讨论】：

【解决方案3】：

添加fixed-bottom:

<div class="footer fixed-bottom">

【讨论】：

【解决方案4】：

在此方法中添加z-index:-9999;，否则如果您有1，它将覆盖您的顶栏。

【讨论】：

【解决方案5】：

另一种解决方案：

您可以使用“最小高度：80vh;”。

这允许您使用视口高度设置最小高度。

引导示例：

<style>
main {
   min-height: 80vh;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<main class="container">
    <!-- Your page content here... -->
</main>
<footer class="footer navbar-fixed-bottom">
    <!-- Your page footer here... -->
</footer>

Compatibility :
Chrome 31+ / FireFox 31+ / Safari 7+ / Internet Expl. 9+ / Opera 29+

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案6】：

您可以通过将页面内容包装在 div 中并应用以下 id 样式来做到这一点：

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<div id="wrap">
    <!-- Your page content here... -->
</div>

为我工作。

【讨论】：

【解决方案7】：

您可能需要检查该示例： http://getbootstrap.com/2.3.2/examples/sticky-footer.html

【讨论】：

那是粘性页脚，不是固定页脚：/
@aaronz 有什么区别？
@ArsenIbragimov 如果内容高于视图，则粘滞页脚会被推到页面末尾。固定页脚始终在视图底部可见。