这个是最好的!

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

使用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，让主内容容器占用视口高度中剩余的所有空间。

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

bootstrap是这样做的:

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

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

为了让你的粘性页脚工作，你需要包装你的.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;
   }
}

对于Sticky Footer，我们在HTML中使用了两个DIV来实现基本的Sticky Footer效果。这样写:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}