HTML

<div id="wrapper">

  <div id="content">
    <!-- navbar and containers here -->
  </div>

  <div id="footer">
   <!-- your footer here -->
  </div>

</div>

CSS

html, body {
  height: 100%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

#content {
  padding-bottom: 100px; /* Height of the footer element */
}

#footer {
  width: 100%;
  height: 100px; /* Adjust to the footer needs */
  position: absolute;
  bottom: 0;
  left: 0;
}

这很有效

html

<footer></footer>

css

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

最简单的技术可能是使用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>

唯一一个对我有用的!：

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

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

为了让你的粘性页脚工作，你需要包装你的.container-fluid div，你还缺少了.wrapper类的一些属性。试试这个:

从body标签中删除padding-top:70px，并将其包含在.container-fluid中，如下所示:

.wrapper > .container-fluid {
    padding-top: 70px;
}

我们必须这样做，因为向下推主体以适应导航条，最终会将页脚推得更远一点(更远70px)，超过视口，所以我们得到了一个滚动条。相反，使用.container-fluid div会得到更好的结果。

接下来，我们必须将.wrapper类从.container-fluid div外面移除，然后用它来包装#main div，如下所示:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>  

你的页脚当然必须在。wrapper div之外，所以从'。包装div并把它放在外面，像这样:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

在这一切完成后，通过使用负边距正确地将你的页脚推向你的.wrapper类，如下所示:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

这应该可以工作，尽管你可能需要修改一些其他的东西来让它在屏幕调整大小时工作，比如在.wrapper类上重置高度，如下所示:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}