DIV包装内的DIV不保留包装背景

我一直在一个网站上使用漂亮的标准布局，页眉，内容，页脚，每个页面范围内都有一个宽度为900px的DIV，只是像在这个问题中所描述的：DIV包装内的DIV不保留包装背景

Full width background, without a wrapper

现在的问题本身是，每当浏览器窗口变得比规定DIV宽度小于宽（900px）包装物的背景似乎消失，示出了背景网站本身的颜色。这在使用上述问题中的代码时也会发生。

这是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>

任何建议表示赞赏。

来源

2013-01-16 Juan José Almillategui

'身高：229;'299什么？哩？英寸？像素？每秒西瓜？ –

你可以创建一个[小提琴]（http://jsfiddle.net/）来演示这个问题吗？ – Blaise

这是一个演示。我无法重新创建。 http://jsfiddle.net/pjykp/ – isherwood

您可能无法在scrollarea中看到背景。您需要设置min-width: 900px;或max-width: 900px;，以便背景将显示在Scrollarea中。

来源

2013-01-16 21:09:39 Chanckjh

谢谢！这解决了这个问题，这让我意识到我对这个话题没有足够的了解。 –

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

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

对于#headerwrapper应该做的伎俩。

来源

2013-01-16 21:28:30

那么这当然是一个明确的解释，但'最小宽度'的建议前面提到另一个答案。它确实解决了我的问题，所以我也非常感谢你。 –

DIV包装内的DIV不保留包装背景

回答

相关问题