拉伸到容器的高度

我試圖在this example後面做一個背景，但是我需要嵌套2個容器。拉伸到容器的高度

我的代碼看起來是這樣的：

XHTML: 
<body> 
    <div id="background_shadow"> 
     <div id="container"> 
      <!--content--> 
     </div> 
    </div> 
</body> 

css: 
#background_shadow{ 
    margin:0 auto; /* center, not in IE5 */  
    height:100%;  
    height:auto !important; /* real browsers */ 
    min-height:100%; /* real browsers */ 

    width: 876px; 
    padding: 0px 72px; 
    background: url("../images/background_shadow.png") repeat-y center; 
} 

#container{ 
    width: 100%; 
    margin: auto; 
    background-image: url("../images/background.jpg") repeat-y; 
    height: 100%; 
}

的問題是，#container的元素不與#background_shadow拉伸。我錯過了什麼嗎？我想用嵌套的容器2的背景圖像，因爲他們中的一個是透明的，如果我第二圖像上使用PNG而不是JPEG的文件大小太大（約1Mo鋼）

Here is what I'm getting

And what I would like

我想如果沒有任何解決方案，我將需要使用一個大的PNG。

謝謝

來源

2011-08-27 isra17

我認爲你需要設置最小高度：100％到#containter，而不是高度：100％。 – Gerben

不，我想讓容器伸展＃background_shadow的高度。最小高度不會改變任何東西。 – isra17

您所提供的例子，你#background_shadow應該有position: relative。這將允許它，它的孩子超出了直接文檔流的限制。

使用Firebug從示例鏈接中刪除頁腳 - 您會看到它上面的div展開以填充頁面，即使它的內容不需要額外的高度。

來源

2011-08-27 19:35:49 Dawson

這不起作用。我想要的是示例頁面中的#content元素延伸到適合＃容器的高度。但是即使使用「height：100％」，它仍然像'height：auto;'一樣運行（延伸到內部內容）。 – isra17

對於height: 100%;在一個元素上工作，所有父元素也需要它（即使是html和body）。因爲height: auto !important;，它不再在#container孩子中工作。您可以刪除height: auto;或添加#container { min-height: 100%; }。我只是在Opera 11中測試它，顯然min-height工作得很好。不過，不知道IE。

來源

2011-08-27 21:04:14 Seba

拉伸到容器的高度

回答

相關問題