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
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
