Estirar la altura al contenedor

I'm trying to make a background following este ejemplo, 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/background.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.

Gracias

preguntado el 27 de agosto de 11 a las 19:08

I think you need to set min-height:100% to #containter, not height:100%. -

No, I want the container stretching with #background_shadow's height. min-height don't change anything. -

2 Respuestas

Ayudas height: 100%; to work on an element, all parent elements need it, too (even html y body). So because of height: auto !important;, it doesn't work anymore in the #container niño.

Puede eliminar el height: auto; o agregar #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.

Respondido 28 ago 11, 01:08

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.

Respondido 27 ago 11, 23:08

This isn't working. What I would like is that the #content element from the example page stretch to fit the #container's height. But even with height:100%; it still act like height: auto; (stretch to inner content). - israxnumx

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.