Question

我正在尝试Bootstrap，我想知道如何滚动内容，如果不将页面从页面中消失，我怎样才能修复页脚？

Answer 1

要获得贴在视口底部的页脚，请将其固定在此位置：

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

Bootstrap在Navbar中包含此CSS＆gt;包含班级fixed-bottom的展示位置部分。只需将此类添加到页脚元素：

<footer class="fixed-bottom">

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

Answer 2

添加：

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

https://stackoverflow.com/a/21604189

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

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

Answer 3

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

Answer 4

另一种解决方案：

您可以使用“最小高度：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+ / Opera 29+

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

Answer 5

添加此内容：

<div class="footer fixed-bottom">

Answer 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>

为我工作。

Answer 7

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

固定页脚在Bootstrap中

7 个答案: