CSS，使页眉和页脚在浏览器调整大小时保持 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7690071/
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
CSS, making header and footer keep 100% width on browser resize
提问by varatis
I've almost got this figured out by using previous questions, but I'm running into a small problem.
通过使用以前的问题，我几乎已经弄清楚了这一点，但是我遇到了一个小问题。
I need my header and footer to span 100% of the page when I resize the browser, and I've solved this for the most part by using min-width on the header and footer. The header is behaving very well, but the footer has a little white space on the right at all times. Help? NOTE: The white space only occurs on browser resize (getting smaller), and it is equally spaced at all times.
当我调整浏览器大小时，我需要我的页眉和页脚跨越 100% 的页面，我已经通过在页眉和页脚上使用 min-width 解决了大部分问题。页眉表现得很好，但页脚的右侧总是有一点空白。帮助？注意：空白仅在浏览器调整大小（变小）时出现，并且始终等距。
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
min-width:1100px;
}
#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;
min-width:1100px;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
EDIT: I've changed min-width in the footer to be 1120px as a bandaid solution, and it's working for the moment. Why is this working??
编辑：作为创可贴解决方案，我已将页脚中的 min-width 更改为 1120px，目前正在运行。为什么这是工作？
回答by Simon Arnold
Your problem's that you set padding:10px;and min-width:1100px;on your header while you define min-width:1100px;on your footer. That is causing you your white space.
您的问题在于您在页脚上定义时在页眉上设置padding:10px;和设置。这导致了你的空白。min-width:1100px;min-width:1100px;
Try something like this instead: http://jsfiddle.net/hrkp6/
试试这样的东西：http: //jsfiddle.net/hrkp6/
回答by Sparky
The padding in your header is screwing you up here.
标题中的填充在这里让您感到困惑。
I removed it and gave it a fixed height for this demo...
我删除了它并为这个演示给了它一个固定的高度......
It's because paddingis addedto the dimensions of the element which makes it wider than you specify.
这是因为padding被加入到这使得它比你指定宽元素的尺寸。
回答by methodofaction
Try with this:
试试这个：
#footer {
position:absolute;
bottom:0;
left: 0;
right: 0;
height:60px;
background:#6cf;
/* get rid of min-width */
}
