[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