用Haml & Sass的话说就是:

Haml for app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

app/assets/stylesheet /application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

基于http://getbootstrap.com/examples/sticky-footer-navbar/

除了刚才添加的CSS之外，还需要在关闭wrap div之前添加push div

HTML的基本结构是

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

实时视图 编辑视图

当前版本的bootstrap似乎不再适用于这个函数了。如果你下载了他们的sticky-footer-navbar的例子，并在主体区域放置了大量的内容，footer将被向下推过视口的底部。它一点也不粘。

推div应该在包装后，而不是在..就像这样

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>

这里有一个方法，将添加一个粘脚，不需要任何额外的CSS或Javascript，除了什么已经在Bootstrap，不会干扰你当前的页脚。

示例:Easy Sticky Footer

只需复制并粘贴到您的代码。不吵闹不混乱。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>

Html

<footer class="footer navbar-fixed-bottom">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>

CSS

.footer {
    position: fixed;
    bottom: 0;
}