[Front End Web Dev] ¿Como mantener el footer siempre abajo?

¿A quién no le ha pasado este problema tan interesante? Tienes un super contenido con todo y animaciones, pero de pronto cuando no tienes mucho contenido el footer aparece casi por la mitad de la página. Revisas el body y los contenedores intentando asegurarte de que estén bien puesto los relative y absolute, pero aun asi parece no funcionar nada.

Lo bueno aquí es que no es brujería y sí tiene solución. El problema es simplemente el orden, por eso aquí compartiré la forma en que me funciónó.

HTML

Empecemos definiendo un esquema básico para nuestra página.

CSS

Y por último el CSS que hará la mágia.

UPDATE 2016-02-17

HTML

CSS

15 thoughts on “[Front End Web Dev] ¿Como mantener el footer siempre abajo?

  1. excelente gracias!!! me sirvi'o, excepto cuando tengo un iframe dentro del contenido el footer me sale en medio de la p'agina y no logro solucionarlo, tambien tengo el fondo de una imagen grande con css, no se que sera. 🙁

  2. ummm vale funciona pero no usen div's con los id de header, footer, etc, para eso existen las propias etiquetas , etc.

    No es buena practica lo que se muestra aqui es mejor usar las etiquetas correctas así tendrán una web ordenada y bien estructural mente :v.

  3. Lo que dices es cierto. Lo que pasa es que este post se hizo pensando en HTML4, las etiquetas header y footer que mencionas recién se introdujeron en HTML5. Tengo que hacer un update. Gracias por tu aporte

Agregue un comentario

Su dirección de correo no se hará público.