100

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

4

7 回答 7

247

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

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

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

<footer class="fixed-bottom">

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

于 2013-10-12T05:15:00.987 回答
89

添加这个：

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

https://stackoverflow.com/a/21604189

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

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

于 2016-07-29T18:56:03.823 回答
17

添加固定底部：

<div class="footer fixed-bottom">
于 2019-11-14T14:18:36.047 回答
3

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

于 2016-12-02T13:36:18.140 回答
2

另一个解决方案：

您可以使用“最小高度：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>
兼容性：
Chrome 31+ / FireFox 31+ / Safari 7+ / Internet Expl. 9+ / 歌剧 29+

更多信息： https ://developer.mozilla.org/fr/docs/Web/CSS/length

于 2021-03-03T09:11:15.960 回答
1

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

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

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

为我工作。

于 2020-04-02T13:15:35.320 回答
-4

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

于 2014-01-15T12:30:29.077 回答