Stretch height to container_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-31 00:28 出处：网络

I\'m trying to make a background following this example, but I need to nest 2 containers. My code look something like:

相关专题：css

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.