[Ovillo] ¿funciona min-height dentro de otro min-height?

coso kioscoelcoso en gmail.com
Lun Oct 2 11:25:29 UTC 2006


Me explico: Tengo un div=contenedor con min_height 100% (exepto para IE
claro) y dentro tengo otro div=cuerpo al que tambien le quiero aplicar
min-height 100% pero no me funciona ni en FF ni en Opera en IE si pero con
los condicionales claro



HTML


<div id="contenedor">
            <div id="cabecera">
                <h1>Cabecera</h1>
            </div><!-- end cabecera -->

            <div id="cuerpo">
                <p>
                Bien, vamos por partes. Por un lado necesitas que el
elemento contenedor
tenga una altura del 100% de la pantalla cuando no tiene suficiente
contenido, y se estire lo necesario cuando el contenido fuerce el scroll
del navegador. Para eso, debes darle un min-height del 100% (height en
el caso de IE), al tiempo que a los elementos html y body les das un
height del 100%.

Luego, debes posicionar absolutamente la cabecera y el pie respecto del
contenedor. Para ello debes posicionar el contenedor y aplicar
position:absolute a los 2 elementos, colocándolos con top:0 y bottom:0
donde quieres.
el caso de IE), al tiempo que a los elementos html y body les das un
height del 100%.

Luego, debes posicionar absolutamente la cabecera y el pie respecto del
contenedor. Para ello debes posicionar el contenedor y aplicar
position:absolute a los 2 elementos, colocándolos con top:0 y bottom:0
donde quieres.
el caso de IE), al tiempo que a los elementos html y body les das un
height del 100%.

Luego, debes posicionar absolutamente la cabecera y el pie respecto del
contenedor. Para ello debes posicionar el contenedor y aplicar
position:absolute a los 2 elementos, colocándolos con top:0 y bottom:0
donde quieres.
el caso de IE), al tiempo que a los elementos html y body les das un
height del 100%.

Luego, debes posicionar absolutamente la cabecera y el pie respecto del
contenedor. Para ello debes posicionar el contenedor y aplicar
position:absolute a los 2 elementos, colocándolos con top:0 y bottom:0
donde quieres.
el caso de IE), al tiempo que a los elementos html y body les das un
height del 100%.

Luego, debes posicionar absolutamente la cabecera y el pie respecto del
contenedor. Para ello debes posicionar el contenedor y aplicar
position:absolute a los 2 elementos, colocándolos con top:0 y bottom:0
donde quieres.
el caso de IE), al tiempo que a los elementos html y body les das un
height del 100%.


                </p>


            </div><!-- end cuerpo -->

            <div id="pie">
                <p>pie...............................................</p>
            </div><!-- end pie -->

</div><!-- end contendor -->



CSS


<style>
html,body{
background-color:#CCCCCC;
margin:0;
padding:0;
height:100%;
}

#contenedor{
background-color:#FFFFFF;
width:700px;
margin:auto;
min-height:100%;

}

#cabecera{
background-color:#CCFFFF;
margin:0;

}

#cabecera h1{
margin:0;


}

#cuerpo{
background-color:#FF9900;
margin:0;
min-height:100%;



}

#cuerpo p{
margin:0;
}

#pie{
background-color:#99CCFF;
margin:0;

}

#pie p{
margin:0;
}

</style>

<!--[if IE]>
<style>
#cuerpo{
background-color:#FF9900;
height:100%;
}
#contenedor{
height:100%;

}


</style>
<![endif]-->



-- 
juan romero cruz


Más información sobre la lista de distribución Ovillo