我通常熟悉使用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;
}
其他回答
这是用Twitter Bootstrap和新的navbar-fixed-bottom类的正确方法:(你不知道我花了多长时间寻找这个)
CSS:
html {
position: relative;
min-height: 100%;
}
#content {
padding-bottom: 50px;
}
#footer .navbar{
position: absolute;
}
HTML:
<html>
<body>
<div id="content">...</div>
<div id="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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/。
下面是一个使用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>
小提琴
这很有效
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;
}
使用下面的类将它推到页面的最后一行，也使它到页面的中心。 如果你正在使用ruby on rails HAML页面，你可以使用下面的代码。 % footer.card.text-center
请不要忘记使用twitter bootstrapp
