Buenas a todos,
tengo una maquetación en CSS a 3 columnas con header y footer. La cosa no va mal pero no se porque razón el pie no llega a ocupar el resto de pantalla que queda libre. Pongo captura para aprecia mejor el problema:
Los estilos son estos:
Código:
body,html{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
padding:0;
width:100%;
height:100%;
}
#container{
position:relative;
left:0;
top:0;
width:100%;
min-height:100%;
overflow:hidden;
}
*html #container{
height:100%;
overflow:visible;
}
#header{
position:relative;
left:0;
top:0;
width:100%;
height:100px;
background:cyan;
}
#cuerpo{
position:relative;
left:0;
top:0;
width:100%;
min-height:600px;
overflow:hidden;
}
*html #cuerpo{
height:600px;
overflow:visible;
}
#cuerpo div.col{
position:relative;
display:block;
left:0;
top:0;
min-height:600px;
float:left;
overflow:hidden;
}
#cuerpo #col1{
background:green;
width:5%;
}
#cuerpo #col2{
background:#CDE9F8;
width:76%
}
#cuerpo #col3{
background:steelblue;
width:19%;
}
*html #cuerpo div.col{
height:600px;
overflow:visible;
}
#footer{
position:relative;
left:0;
top:0;
width:100%;
height:60px;
background:red;
overflow:hidden;
}
El HTML este:
Código:
<body>
<!-- DIV CONTENEDOR -->
<div id="container">
<div id="header">header</div>
<div id="cuerpo">
<div id="col1" class="col">col1</div>
<div id="col2" class="col">col2</div>
<div id="col3" class="col">col3</div>
</div>
<div id="footer">footer</div>
</div>
</body>
Si al HEADER le pongo height 200px entonces si me ocupa toda la pantalla pero en mi caso lo necesito de 100px.
Saludos y gracias
