Eventos

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

[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.

<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
view raw Snippet-1.html hosted with ❤ by GitHub

CSS

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

html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
/* ... */
}
#content {
/* ... */
padding-bottom: 81px; /* El tamaño del footer para evitar el sobreposicionamiento */
}
#footer {
width: 100%;
height: 81px;
position: absolute;
bottom: 0;
left: 0;
}
view raw Snippet-2.css hosted with ❤ by GitHub


UPDATE 2016-02-17



HTML


<body>
<div id="wrapper">
<header>
<div class="container">Reach: http://www.reachsos.com/</div>
</header>
<div class="container">
Visita, comenta y comparte ;)!
</div>
<footer>
<div class="container">Blog: http://blog.epicalsoft.com/</div>
</footer>
</div>
</body>
view raw Snippet-3.html hosted with ❤ by GitHub

CSS


html,
body {
margin: 0px;
padding: 0px;
height: 100%;
}
#wrapper{
padding-bottom: 81px;
min-height: calc(100% - 81px);
position: relative;
}
header {
color: white;
background-color: #0086CD;
}
footer {
color: white;
background-color: #1A1A1A;
width: 100%;
height: 81px;
position: absolute;
bottom: 0;
left: 0;
}
.container {
padding:12px;
}
view raw Snippet-4.css hosted with ❤ by GitHub


15 comentarios:

  1. Anónimo19 de febrero de 2015, 9:33 a.m.

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

    ResponderBorrar
  2. Anónimo26 de abril de 2015, 7:40 a.m.

    sencillo, perfecto. Muchas gracias.

    ResponderBorrar
  3. Anónimo23 de mayo de 2015, 8:58 p.m.

    Buen Aporte.... Thanks.. Very good..

    ResponderBorrar
  4. Unknown31 de julio de 2015, 6:17 a.m.

    Gracias..... Era lo que necesitaba

    ResponderBorrar
  5. Anónimo23 de agosto de 2015, 10:50 a.m.

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

    ResponderBorrar
  6. El ABC de la tecnología13 de septiembre de 2015, 3:11 p.m.

    bien me sirvió de mucho.

    ResponderBorrar
  7. Luis Felipe10 de octubre de 2015, 3:14 p.m.

    muchas gracias el mas sencillo y funcional :D

    ResponderBorrar
  8. Unknown19 de octubre de 2015, 12:43 p.m.

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

    ResponderBorrar
  9. Unknown6 de noviembre de 2015, 10:10 a.m.

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

    ResponderBorrar
  10. Cristian Sanchez17 de noviembre de 2015, 1:28 p.m.

    Este blog ha sido eliminado por un administrador de blog.

    ResponderBorrar
  11. Cristian Sanchez17 de noviembre de 2015, 1:29 p.m.

    Muchas gracias, me sirvio de mucho! :D

    ResponderBorrar
  12. Anónimo24 de noviembre de 2015, 9:16 a.m.

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

    ResponderBorrar
  13. constanza2 de diciembre de 2015, 11:54 a.m.

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

    ResponderBorrar
  14. Unknown17 de febrero de 2016, 8:19 p.m.

    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.

    ResponderBorrar
  15. Unknown17 de febrero de 2016, 9:05 p.m.

    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

    ResponderBorrar

Suscribirse a: Comentarios de la entrada (Atom)

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

Con tecnología de Blogger.