twitter-bootstrap 固定页脚在页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14782437/
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
Fixed footer at bottom of page
提问by Feriscool
I want a fixed footer at the bottom of my page where I'm able to have one line of text (all text centered), just like this.
我想要在我的页面底部有一个固定的页脚，在那里我可以有一行文本（所有文本居中），就像这样。
I've tried using other tutorials, but nonehave worked.
我试过使用其他教程，但都没有奏效。
How can I do this?
我怎样才能做到这一点？
回答by JSW189
I would recommend using Ryan Fait's sticky footer. It can accomplish what you are trying to do with pure CSS.
我建议使用Ryan Fait 的粘性页脚。它可以完成您尝试使用纯 CSS 执行的操作。
HTML:
HTML：
<div class="wrapper">
Content Here
<div class="push"></div>
</div>
<div class="footer"></div>
CSS:
CSS：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer { /* centers the text */
text-align: center; /* horizontal centering */
line-height: 142px; /* vertical centering; should be equal to the footer height */
}
回答by matsolof
Try changing the footer element and the preceeding hr element like this:
尝试像这样更改页脚元素和前面的 hr 元素：
<footer style="position:fixed; left:0px; right:0px; bottom:0px;
background:rgb(255,255,255); text-align:center;">
<hr>
<p>© Company 2012</p>
</footer>
I think this more or less solves your problem. It doesn't work exactly as the footer at http://ryanfait.com/sticky-footer/, but as far as I understand your question this is what you want.
我认为这或多或少地解决了你的问题。它不像http://ryanfait.com/sticky-footer/ 上的页脚那样工作，但据我了解你的问题，这就是你想要的。
PS: The CSS should of course be put in the CSS-file.
PS：CSS 当然应该放在 CSS 文件中。
