Eventos

[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 comentarios:

  1. Muchas gracias por el aporte, después de probar y probar y probar, por fin lo he conseguido!!

    ResponderEliminar
  2. sencillo, perfecto. Muchas gracias.

    ResponderEliminar
  3. Buen Aporte.... Thanks.. Very good..

    ResponderEliminar
  4. 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. :(

    ResponderEliminar
  5. muchas gracias el mas sencillo y funcional :D

    ResponderEliminar
  6. Excelente, me funcionó al 100% tu aporte :D

    ResponderEliminar
  7. Muchas gracias ♥ ayudaste a una clase entera de mi grupo para una página final xd

    ResponderEliminar
  8. Este blog ha sido eliminado por un administrador de blog.

    ResponderEliminar
  9. Muy buen aporte! me ha sido de gran utilidad.
    Gracias!

    ResponderEliminar
  10. Eres genial amigo!
    Me fue de muchisima ayuda! (y)

    ResponderEliminar
  11. 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.

    ResponderEliminar
  12. 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

    ResponderEliminar

Epicalsoft — Superheroic Software Development Blog Designed by Templateism.com Copyright © 2014

Con tecnología de Blogger.