Hola (bienvenida a FdW
), esto es lo que hago yo (hay otras formas, pero yo uso esta):
Código HTML:
<div id="contenedor">
<div class="relleno"></div>
</div>
<div id="pie"></div>
Código:
html,
body{
height:100%}
#contenedor{
min-height:100%}
#pie{
height:40px;
margin:-40px 0 0 0;}
.relleno{
height:40px}
¿que es todo esto? Bien, te lo explico:
genero un contenedor que mida como mínimo el 100% de su padre (body, por eso hay que poner height:100% porque es el valor que toma como referencia).
Luego, fuera y debajo de esa capa contenedora genero otra (pie) que mida 40px de alto (medida como ejemplo, puede ser cualquier otra), y la "subo" 40px para arriba (esta técnica se llama "posicionameinto negativo", porque hace uso de un valor negativo del margin)
Por último la capa relleno sirve para que el pie no se superponga al contenido del contenedor.
Lamentablemente la propiedad min-height no funciona en Internet Explorer 6 e inferior (si lo hace en el 7), por lo que hay que incluir este pequeño código (un
comentario condicional) antes del <body>:
Código HTML:
<!--[if lte IE 6]>
<style type="text/css">
#contenedor{
height:100%;}
</style>
<![endif]-->