CSS 使用 Twitter Bootstrap 将页脚粘贴到页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11555931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make footer stick to bottom of page using Twitter Bootstrap
提问by Richlewis
I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.
我有一些网页内容不多，页脚位于页面中间，但我希望它位于底部。
I have put all my pages in a "holder"
我已将所有页面放在一个“支架”中
#holder {
min-height: 100%;
position:relative;
}
And then used the following CSS for my footer
然后将以下 CSS 用于我的页脚
ul.footer {
margin-top: 10px;
text-align: center;
}
ul.footer li {
color: #333;
display: inline-block;
}
#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
The html for my footer
我的页脚的 html
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by <a href="#">Fishplate</a></li>
<li>Email:[email protected]</li>
</ul>
</div>
</div>
</div>
</div>
I would like to keep the footer fluid.
我想让页脚保持流畅。
采纳答案by My Head Hurts
As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807
正如评论中所讨论的，您的代码基于此解决方案：https: //stackoverflow.com/a/8825714/681807
One of the key parts of this solution is to add height: 100%to html, bodyso the #footerelement has a base height to work from - this is missing from your code:
此解决方案的关键部分之一是添加height: 100%到元素，html, body以便#footer元素具有可工作的基本高度 - 您的代码中缺少这一点：
html,body{
height: 100%
}
You will also find that you will run into problems with using bottom: -50pxas this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50pxto the last element before the #footer.
您还会发现在使用时会遇到问题，bottom: -50px因为当内容不多时，这会将您的内容推倒。您必须添加margin-bottom: 50px到#footer.
回答by Jon
just add the class navbar-fixed-bottom to your footer.
只需将类 navbar-fixed-bottom 添加到您的页脚。
<div class="footer navbar-fixed-bottom">
回答by BlackBeard
回答by easwee
http://bootstrapfooter.codeplex.com/
http://bootstrapfooter.codeplex.com/
This should solve your problem.
这应该可以解决您的问题。
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>
CSS:
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;
color:#fff;
}
回答by Victor
Here is an example using css3:
下面是一个使用 css3 的例子：
CSS:
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:
HTML：
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
回答by Coding Enthusiast
Use the bootstrap classes to your advantage. navbar-static-bottomleaves it at the bottom.
使用引导类对您有利。navbar-static-bottom把它留在底部。
<div class="navbar-static-bottom" id="footer"></div>
回答by Damian Czapiewski
It could be easily achieved with CSS flex. Having HTML markup as follows:
使用 CSS flex 可以轻松实现。具有如下 HTML 标记：
<html>
<body>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>
Following CSS should be used:
应使用以下 CSS：
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > .container {
flex-grow: 1;
}
Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ
这是可以使用的 CodePen：https://codepen.io/webdevchars/pen/GPBqWZ
