我通常熟悉使用css刷新页脚的技术。

但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。


当前回答

使用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; }

保持简单。

footer {
  bottom: 0;
  position: absolute;
}

您可能还需要通过向正文添加等同于页脚高度的margin-bottom来抵消页脚的高度。

它看起来像高度:100%的“链”被打破在div#main。试着增加高度:100%增加高度,这可能会让你更接近目标。

使用这段代码在引导它的工作

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

bootstrap是这样做的:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

只需使用页面源代码,您就应该能够看到。不要忘记<div id="wrap">在顶部。