Html 在屏幕底部放置页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7542683/
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
Placing Footer at Bottom of Screen
提问by Michael
Possible Duplicate:
CSS sticky footer
可能的重复：
CSS 粘性页脚
I had this problem for quite a while now and the problem is with all my footers. Everytime I place in this code syntax:
我有这个问题已经有一段时间了，问题出在我所有的页脚上。每次我在这个代码语法中放置：
<Footer>
<p class="About">DESIGN BY MICHAEL & CODE BY ROKO</p>
</Footer>
Footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 141px;
background: url(../assets/content/footer.png) repeat-x left bottom;
}
The footer is either placed at the bottom but when you scroll, it stay where it is and there footer is pretty much half way up the page, or the text that's supposed to be within' the footer is at the top of the page.
页脚要么放置在底部，但是当您滚动时，它会保持原样，并且页脚几乎位于页面的一半，或者应该在页脚内的文本位于页面顶部。
Could anyone please help me? I tried to look up Sticky Footer and the result was still the same...
有人可以帮我吗？我试图查找粘性页脚，结果仍然相同......
回答by itsmatt
I do something like this and it works pretty well:
我做这样的事情，它工作得很好：
<div class="footer" id="footer">My Footer</div>
#footer
{
clear: both;
border: 1px groove #aaaaaa;
background: blue;
color: White;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: normal;
margin: 0;
position: fixed;
bottom: 0px;
width: 100%;
}
You can see an example here: http://jsfiddle.net/RDuWn/
你可以在这里看到一个例子：http: //jsfiddle.net/RDuWn/
回答by Connor
I found this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-pagea while ago and use a similar method
我发现这个：http: //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page不久前并使用类似的方法
回答by Connor
Check out the below link -
看看下面的链接——
How do you get the footer to stay at the bottom of a Web page?
* {
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 */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
