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>

编辑：我已经将页脚的最小宽度更改为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 */
}

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

3 个答案: