Stretch height to container
I'm trying to make a background following this example, but I need to nest 2 containers.
My code look something like:
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/back开发者_Python百科ground.jpg") repeat-y;
height: 100%;
}
The problem is that the #container element isn't stretching with #background_shadow. Am I missing something? I would like to use nested container with 2 background image because one of them is transparent and if I use png instead of jpeg on the second image the filesize is too big (around 1Mo)
Here is what I'm getting
And what I would like
I guess that if there arn't any solution I will need to use a big png.
Thank you
For height: 100%; to work on an element, all parent elements need it, too (even html and body). So because of height: auto !important;, it doesn't work anymore in the #container child.
You can either remove the height: auto; or add #container { min-height: 100%; }. I just tested it in Opera 11 and apparently min-height works just as fine. Don't know about IE, though.
By the example you provided, your #background_shadow should have position: relative. That's going to allow it and it's children out of the restrictions of straight document flow.
Use Firebug to delete the footer from your example link - you'll see the div above it expand to fill the page even though it's content does not require the additional height.
加载中,请稍侯......
精彩评论