css - DIV 包装器内的 DIV 不保留包装器背景

Question

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

全宽背景，没有包装

现在问题本身是，每当浏览器窗口的宽度小于指定的 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>

任何建议表示赞赏。

Answer 1

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

Answer 2

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

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

因为#headerwrapper应该做的伎俩。