Bien, el otro dia me dispuse ha realizar una maquetacion totalmente liquida, es decir, los anchos y altos de los divs deberian siempre estar en porcentajes.Me decidi por crear un contenedor de la siguiente manera:
Código :
#contenedor{
width:80%;
height:100%;
margin:0 10%;
background-color:#FFCCCC;
}
Pues bien, esto no funciona ya que la altura en porcentaje necesita de un elemento padre o elemento contenedor con una altura definida por lo que:
Código :
html,body{ //Firefox...
height:100%;
}
* html div{ //IE
height:100%;
}De esta manera mi contenedor se expande por todo lo alto de la pantalla.Sin embargo cuando dentro del #contenedor se pone mucho texto, es decir, la cantidad necesaria para que salga el scroll, el contenido se sale fuera del #contenedor:
Código :
<div id="contenedor"> mucho texto.... </div>
Por lo que:
Código :
div{
min-height:100%;
}De esta manera el #contenedor medira el 100% de la pagina y si el contenido es mas grande, el #contenedor se expandira con el.
Pues bien, hasta aki todo maravilloso, pero entonces me dispongo a incorporar un header de la siguiente manera:
Código :
#header{
width:100%;
height:20%;
background-color:#FF0000;
}
<div id="contenedor">
<div id="header"></div>
</div>En Firefox aparace el header como si midiese 100%, es decir ocupando toda la pantalla y el contenido de #contenedor empieza inmediantamente despues.
Despues quite la altura minima a todos los divs y se la puse solo a #contenedor:
Código :
div{
}
#contenedor{
width:80%;
height:100%;
min-height:100%;
margin:0 10%;
background-color:#FFCCCC;
}Despues de ver que esto no funcionaba me cage por primera vez y sin que sirva de precedente en el Firefox, ya que el contenido vuelve a salirse por fuera del #contenedor.
La verdad es que no se que hacer pero seria muy feliz si alguien me diese una pista o incluso la solucion.
Muchas gracias por anticipado.
BOFH Note: usa las etiquetas de código.
