CSS，使页眉和页脚在浏览器调整大小时保持 100% 宽度

Question

通过使用以前的问题，我几乎已经解决了这个问题，但我遇到了一个小问题。

当我调整浏览器的大小时，我需要我的页眉和页脚覆盖 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>

编辑：我已将页脚中的 min-width 更改为 1120px 作为创可贴解决方案，目前它正在工作。为什么这行得通？？

Answer 1

您的问题是您在页眉上设置了padding:10px; 和min-width:1100px;，而在页脚上定义了min-width:1100px;。这导致了你的空白。

试试这样的方法： http://jsfiddle.net/hrkp6/

Answer 2

你的标题中的填充把你搞砸了。

我删除了它并为这个演示设置了一个固定的高度...

http://jsfiddle.net/BA2UY/

这是因为padding 被添加到元素的尺寸中，使其比您指定的更宽。

Answer 3

试试这个：

#footer {
 position:absolute;
  bottom:0;
  left: 0;
  right: 0;
  height:60px;   
  background:#6cf;
  /* get rid of min-width */
}