拉伸到容器的高度

我试图在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

拉伸到容器的高度

回答

相关问题