Div Height: 100%, para todos los exploradores
Hola!
Estoy haciendo una pagina y quiero que los div ocupen todo el alto. Lo hice poniendo height 1005 en el html y en el body, puse display: table y se ve perfectamente en firefox. En chrome no, y en IE un desastre.
<head>
<style>
html,body{
height:100%;}
</style>
</head>
<body>
<div class="contenedora">
<div class="menu">
<CONTENIDO DEL MENU>
</div> <!--fin menu-->
<div class="encabezado">
<CONTENIDO DEL ENCABEZADO>
</div> <!--fin encabezado-->
<div class="cuerpo">
<CONTENIDO DEL CUERPO>
</div> <!--fin cuerpo-->
<div class="clear"></div>
</div> <!--fin contenedora-->
<div class="pie">
<CONTENIDO DEL PIE>
</div> <!--fin pie-->
y los CSS:
footer, header, section { display: block;}
div.contenedora {
width: 100%;
height:100%;
display:table;
}
div.menu {
float: left;
height: 100%;
width: 20%;
display:table;
}
div.encabezado {
float: right;
width: 80%;
}
.cuerpo {
padding:20px;
display:table;
}
.pie {
display: table;
height:25px;
width:100%;
}
.clear {
clear: all;
}
Espero que puedan ayudarme!!
