Footer... margin-top: auto

[opzina]

Iniciado por kseso?

Esa estructura se conoce, entre otros nombres, como "pie abajo".
Hay varias técnicas para lograrlo.
Una muy simple:

Código CSS:

* {margin:0; padding:0;}
 
html, body { height: 100%;}
 
#contenedor {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -1em;
}
 
.empuje {height:1em;}
 
#pie {
min-height: 1em;
height: auto !important;
height: 1em;
}
 

y el html

Código HTML:

<div id="contenedor">
    <!-- Todo el contenido menos el pie -->
    <div class="empuje"></div>
</div>
<div id="footer">
    <!-- Contenido del pie -->
</div>
 

Puede verla en línea aquí

Pero si lo hace así con poco contenido el footer le va a quedar pegado abajo y el contenido y el header muuuyy arriba. Si puedes mira mi rta. gracias.