我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
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;
}
其他回答
另一种可能的解决方案是使用媒体查询
@media screen and (min-width:1px) and (max-width:767px) {
.footer {
}
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:1120px){
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
使用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;
}
Bootstrap v4+溶液
这里有一个解决方案，不需要重新考虑HTML结构或任何涉及填充的额外CSS技巧:
<html style="height:100%;">
...
<body class="d-flex flex-column h-100">
...
<main class="flex-grow-1">...</main>
<footer>...</footer>
</body>
...
</html>
请注意，此解决方案允许页脚具有灵活的高度，这在为多个屏幕尺寸设计页面时特别有用，在收缩时使用内容包装。
为什么会这样
style="height:100%;" makes the <html> tag take the whole space of the document. class d-flex sets display:flex to our <body> tag. class flex-column sets flex-direction:column to our <body> tag. Its children (<header>, <main>, <footer> and any other direct child) are now aligned vertically. class h-100 sets height:100% to our <body> tag, meaning it will cover the entire screen vertically. class flex-grow-1 sets flex-grow:1 to our <main>, effectively instructing it to fill any remaining vertical space, thus amounting to the 100% vertical height we set before on our <body> tag.
工作演示在这里:https://codepen.io/maxencemaire/pen/VwvyRQB
有关flexbox的更多信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/。
为了让你的粘性页脚工作，你需要包装你的.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;
}
}
