Question

我正在尝试在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。

谢谢

Answer 1

要让height: 100%;处理元素，所有父元素也需要它（甚至html和body）。因为height: auto !important;，它在#container孩子中不再有效。

您可以删除height: auto;或添加#container { min-height: 100%; }。我刚刚在Opera 11中进行了测试，显然min-height的工作正常。不过，不知道IE。

Answer 2

根据您提供的示例，您的#background_shadow应该有position: relative。这将允许它和它的孩子摆脱直接文档流的限制。

使用Firebug从示例链接中删除页脚 - 您会看到它上面的div展开以填充页面，即使它的内容不需要额外的高度。

拉伸高度到容器

2 个答案: