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不保留包裝背景

回答

相關問題