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

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


当前回答

更简单的官方示例:http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

其他回答

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

根据Bootstrap 4.3的例子,如果你像我一样失去理智,这是它实际工作的方式:

footer div的所有父div都需要有高度:100% (h-100类) 页脚的直接父类需要有display: flex (d-flex类) 页脚需要有margin-top: auto (mt-auto类)

问题在于,在现代前端框架中,我们经常对这些元素进行额外的包装。

例如,在我的案例中,使用Angular,我用一个独立的应用根组件、应用主组件和页脚组件组成了视图——所有这些组件都将它们的自定义元素添加到DOM中。

因此,为了使它工作,我必须向这些包装器元素添加类:一个额外的h-100,将d-flex向下移动一级,并将mt-auto从页脚向上移动一级(因此实际上它不再在页脚类上,而是在<app-footer>自定义元素上)。

发现这里的片段工作得很好

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
} 

这现在包含在Bootstrap 2.2.1中。

引导3.倍

使用navbar组件并添加.navbar-fixed-bottom类:

<div class="navbar navbar-fixed-bottom"></div>

引导4.倍

<div class="navbar fixed-bottom"></div>

别忘了添加body {padding-bottom: 70px;}或以其他方式覆盖页面内容。

文档:http://getbootstrap.com/components/ # navbar-fixed-bottom

我找到了mix of navbar-inner和navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

这看起来不错,而且对我很有效

参见小提琴中的例子