CSS: Maquetado y pie
A pedido de un colega va este requete-mini-tuto de como hacer que el DIV de pie de página quede en donde debe (al fondo del contenedor).
Supongamos una estructura semántica como la siguiente:
<body>
<div id=”contenedor”>
<div id=”encabezado”></div>
<div id=”contenido”>Contenido de la página</div>
<div id=”pie”>Copyleft 2009</div>
</div>
</body>
Bueno, los estilos para cada parte quedarían así:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow:hidden;
}
#contenedor {
width: 100%;
height: 100%;
background: #DDD;
position: relative;
}
#encabezado {
width: 100%;
background: #CCC;
position: absolute;
top:0;
height:130px;
}
#contenido {
width: 100%;
overflow: auto;
position: absolute;
top: 130px;
bottom: 40px;
}
#pie {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0;
height: 40px;
}
