我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
对于Sticky Footer，我们在HTML中使用了两个DIV来实现基本的Sticky Footer效果。这样写:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
其他回答
使用Bootstrap 3.6.6测试。
HTML
<div class="container footer navbar-fixed-bottom">
<footer>
<!-- your footer content here -->
</footer>
</div>
CSS
.footer {
bottom: 0;
position: absolute;
}
唯一一个对我有用的!：
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}
页脚高度匹配wrap元素的底部缩进的大小。
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
使用Bootstrap 4中内置的flex实用程序! 以下是我使用Bootstrap 4工具得到的结果。
<div class="d-flex flex-column" style="min-height: 100vh;">
<header></header>
<div class="container flex-grow-1">
<div>Some Content</div>
</div>
<footer></footer>
</div>
.d-flex使主div成为一个伸缩容器 .flex-column在主div来安排你的flex项目在一个列 min-height: 100vh到主div，可以使用style属性，也可以在CSS中，垂直填充视口 元素上的.flex-grow-1，让主内容容器占用视口高度中剩余的所有空间。
使用navbar组件并添加.navbar-fixed-bottom类:
<div class="navbar navbar-fixed-bottom"></div>
增加身体
{ padding-bottom: 70px; }
