Html 无论浏览器或设备如何，如何修复屏幕底部的页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15069983/
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
How to fix footer on bottom of screen, regardless of browser or device?
提问by user1400290
I know about sticky footer. But my situation is that I am developing a website that will be used on PC & mobile devices. Therefore, the footer displayed gets adjusted by width of the screen.
我知道粘性页脚。但我的情况是我正在开发一个将在 PC 和移动设备上使用的网站。因此，显示的页脚会根据屏幕宽度进行调整。
And footer's height gets changes on each resolution.
并且页脚的高度在每个分辨率上都会发生变化。
Can anyone have idea that how could I display footer on the bottom of the page(not screen). Some page's height is small, and footer gets displayed in between of page.
任何人都可以知道如何在页面底部（不是屏幕）显示页脚。某些页面的高度很小，页脚显示在页面之间。
I have following structure:
我有以下结构：
<body style="height:100%;">
<div style="height:100%;">
<div id="wrapper" style="height:100%; max-width:800px;">
<div id="header">
some content
</div>
<div id="content">
some content
</div>
<div id="footer" style="position:relative; width:100%;">
some content
</div>
</div>
</div>
</body>
回答by s.lenders
This might clear something up:
这可能会澄清一些事情：
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>