我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
下面是使用Flexbox的最新版本Bootstrap(在撰写本文时为4.3)的解决方案。
HTML:
<div class="wrapper">
<div class="content">
<p>Content goes here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.wrapper {
flex-grow: 1;
}
一个代码依赖的例子:https://codepen.io/tillytoby/pen/QPdomR
其他回答
最简单的技术可能是使用Bootstrap navbar-static-bottom，并将主容器div设置为高度:100vh(新的CSS3视图端口百分比)。这将把页脚冲洗到底部。
<main class="container" style="height: 100vh;">
some content
</main>
<footer class="navbar navbar-default navbar-static-bottom">
<div class="container">
<p class="navbar-text navbar-left">© Footer4U</p>
</div>
</footer>
它看起来像高度:100%的“链”被打破在div#main。试着增加高度:100%增加高度，这可能会让你更接近目标。
下面是一个使用css3的例子:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
小提琴
根据Bootstrap 4.3的例子，如果你像我一样失去理智，这是它实际工作的方式:
footer div的所有父div都需要有高度:100% (h-100类) 页脚的直接父类需要有display: flex (d-flex类) 页脚需要有margin-top: auto (mt-auto类)
问题在于，在现代前端框架中，我们经常对这些元素进行额外的包装。
例如，在我的案例中，使用Angular，我用一个独立的应用根组件、应用主组件和页脚组件组成了视图——所有这些组件都将它们的自定义元素添加到DOM中。
因此，为了使它工作，我必须向这些包装器元素添加类:一个额外的h-100，将d-flex向下移动一级，并将mt-auto从页脚向上移动一级(因此实际上它不再在页脚类上，而是在<app-footer>自定义元素上)。
这对我来说非常有效。
将这个类navbar-fixed-bottom添加到你的页脚。
<div class="footer navbar-fixed-bottom">
我是这样用的:
<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>
它在整个宽度的底部。
编辑:这将设置页脚始终可见，这是你需要考虑的事情。
