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

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


当前回答

这个是最好的!

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

其他回答

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

页脚高度匹配wrap元素的底部缩进的大小。

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

在bootstrap 4.3的最新版本中,这可以使用.fixed-bottom类来完成。

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

下面是我如何在页脚中使用它:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

你可以在这里的职位文档中找到更多信息。

下面是一个使用css3的例子:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

小提琴

这对我来说非常有效。

将这个类navbar-fixed-bottom添加到你的页脚。

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

我是这样用的:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

它在整个宽度的底部。

编辑:这将设置页脚始终可见,这是你需要考虑的事情。

bootstrap是这样做的:

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

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