Hola!
Estoy haciendo una pagina y quiero que los div ocupen todo el alto. Lo hice poniendo height 100% en el html y en el body, puse display: table y se ve: en firefox perfecto, en Chrome la columna menu (izquierda) no llega hasta el pie. En IE un desastre, cuando el texto del cuerpo supera el menu, se va debajo, y el pie me queda en la mitad del texto del cuerpo...
Este es el codigo:
<head>
<style>
html,body{
height:100%;}
</style>
</head>
<body>
<div class="contenedora">
<div class="menu">
<ul style="margin-top:108px;">
<li>
<p><button class="button">Historia</button>
<p><button class="button">Historia</button>
<p><button class="button">Historia</button>
</li>
</ul>
</div> <!--fin menu-->
<div class="encabezado">
<p><h1>ENCABEZADO</h1></p>
</div> <!--fin encabezado-->
<div class="cuerpo">
<p><h3>CONTENIDO DEL CUERPO</h3></p>
<p><h4>CONTENIDO DEL CUERPO</p></h4>
</div> <!--fin cuerpo-->
<div class="clear"></div>
</div> <!--fin contenedora-->
<div class="pie">
<p>CONTENIDO DEL PIE
</div> <!--fin pie-->
</body>
</html>
CSS
footer, header, hgroup, menu, nav, section { display: block;}
div.contenedora {
width: 100%;
height:100%;
background-color: #D9D9FF;
display:table;
margin:0px;
}
div.menu {
float: left;
height: 100%;
width: 20%;
margin: 0;
text-align: center;
background-color:#2F2851;
display:table;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
div.encabezado {
float: right;
width: 80%;
background-color:#CCCCFF;
border-bottom: #2F2851 3px solid;
}
.encabezado h1 {
text-align:center;
font-family: "Adobe Caslon Pro";
font-size:24px;
margin-top:10px;
padding-bottom:10px;
line-height:0.5;
}
.cuerpo {
padding:20px;
display:table;
}
.cuerpo h3 {
font-family:"Adobe Caslon Pro";
font-size:22px;
line-height:1;
text-align:center;
text-decoration:underline;
}
.cuerpo h4 {
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
padding:20px;
text-align: justify;
}
.pie {
display: table;
height:25px;
background-color:#CCCCFF;
width:100%;
border-top: #2F2851 3px solid;
}
.pie h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align:center;
font-style:italic;
padding-top:5px;
}
.clear {
clear: all;
}
.button {
width: 90%;
background-color:#393164;
font-family:"Adobe Caslon Pro";
font-size: 16px;
color: #cccccc;
margin: 3px;
border: 0px;
padding:5px;
}
Espero que puedan ayudarme, gracias!!!