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

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


当前回答

最简单的技术可能是使用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">&copy; Footer4U</p>
  </div>
</footer>

其他回答

下面是使用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

这是用Twitter Bootstrap和新的navbar-fixed-bottom类的正确方法:(你不知道我花了多长时间寻找这个)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

bootstrap是这样做的:

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

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

使用下面的类将它推到页面的最后一行,也使它到页面的中心。 如果你正在使用ruby on rails HAML页面,你可以使用下面的代码。 % footer.card.text-center

请不要忘记使用twitter bootstrapp

在这里,你会发现HAML (http://haml.info)的方法,导航栏在顶部,页脚在页面底部:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER