DIV 包装器内的 DIV 不保留包装器背景答案

【问题标题】：DIV inside a DIV wrapper does not keep wrapper backgroundDIV 包装器内的 DIV 不保留包装器背景
【发布时间】：2013-01-16 05:23:50
【问题描述】：

我一直在开发一个具有非常标准布局、页眉、内容、页脚的网站，每个都是一个在页面宽度 DIV 内具有 900 像素宽度的 DIV，就像这个问题中描述的那样：

Full width background, without a wrapper

现在问题本身是，每当浏览器窗口的宽度小于指定的 DIV 宽度（900 像素）时，包装器的背景似乎就会消失，显示网站本身的背景颜色。使用上述问题中的代码时也会发生这种情况。

这是 CSS 代码：

#headerwrapper {
    height: 229px;
    background: url(imagenes/header.gif);
    background-repeat: repeat;}

#header {
    width:900px;
    height:229px;
    padding:0px;
    margin:0 auto;
}

这是HTML代码：

<div id="headerwrapper">
    <div id="header">
      Content goes here.
    </div>
</div>

感谢任何建议。

【问题讨论】：

height: 229; 299 什么？英里？英寸？像素？西瓜每秒？
你能创建一个fiddle 来演示这个问题吗？
这是一个演示。我无法重现。 jsfiddle.net/pjykp
@Diodeus 感谢您的评论，尽管这并不能解决问题。 @Blaise isherwood 使用了我拥有的确切代码，只是一个不同的图像。话虽如此，我按照答案的建议使用了min-width: 900px;，从而解决了问题。 @isherwood 确实发生了，也许我不够清楚，但我已经有了解决方案。

标签： css html header wrapper

【解决方案1】：

您可能看不到滚动区域中的背景。您需要设置min-width: 900px; 或max-width: 900px; 以便在滚动区域中显示背景。

【讨论】：

谢谢！这解决了问题，这让我意识到我没有阅读足够的主题。

【解决方案2】：

如果您没有为 #headerwrapper 指定宽度，浏览器会将其设为父容器（div 或 body）的 100%。因此，如果视图区域的宽度小于 900 像素 - #header 变得比 #headerwrapper 宽，因此重叠部分不会显示背景。您可以将overflow:auto; 添加到#headerwrapper 以便出现滚动条，但我认为这不是解决方案。因此最好为#header 添加背景或为#headerwrapper 添加min-width。附言指定

  min-width:900px;
  width:auto !important;

#headerwrapper 应该可以解决问题。

【讨论】：

嗯，这当然是一个明确的解释，但min-width 建议在前面的另一个答案中提到过。它确实解决了我的问题，所以我也谢谢你。