我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
下面是一个使用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>
小提琴
其他回答
在bootstrap 4.3的最新版本中，这可以使用.fixed-bottom类来完成。
<div class="fixed-bottom"></div>
下面是我如何在页脚中使用它:
<footer class="footer fixed-bottom container">
<hr>
<p>© 2017 Company, Inc.</p>
</footer>
你可以在这里的职位文档中找到更多信息。
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 3.6.6测试。
HTML
<div class="container footer navbar-fixed-bottom">
<footer>
<!-- your footer content here -->
</footer>
</div>
CSS
.footer {
bottom: 0;
position: absolute;
}
#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;
}
