[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. Los campos requeridos están marcados *