gpt4 book ai didi

css - 拉伸(stretch)高度到容器

转载 作者:行者123 更新时间:2023-11-28 13:41:57 28 4
gpt4 key购买 nike

我正尝试在 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 拉伸(stretch)。我错过了什么吗?我想使用带有 2 个背景图像的嵌套容器,因为其中一个是透明的,如果我在第二个图像上使用 png 而不是 jpeg,文件大小太大(大约 1Mo)

Here is what I'm getting

And what I would like

我想如果没有任何解决方案,我将需要使用大 png。

谢谢

最佳答案

为了 height: 100%; 在元素上工作,所有父元素也需要它(甚至 htmlbody)。因此,由于 height: auto !important;,它在 #container 子级中不再起作用。

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

关于css - 拉伸(stretch)高度到容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7216789/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com