Como crear un sticky footer, vamos un footer que se quede al final de tu página web.

En mi último trabajo casi todo el mundo era FullStack developers y para todos ellos CSS era poner colores a tu web y poco más pero con el tiempo descubres de que CSS is a bitch

Acaba siendo muy fácil escribir estilos usando el atributo style en tus elementos HTML o usando Javascript pero más que nada haces eso porque realmente no tienes ni p--a idea de CSS. Yo, he llegado a tenerle un grandioso respeto :)

Al crear una página web normalmente vas a querer que tu <footer> siempre se quede pegado al final de esta, nunca será un problema para una página donde tengamos bastante contenido pero el problema vendría cuando en una página de tu web hay muy poco contenido. El resultado es que el <footer> te queda en medio de la pantalla.

Después de varias veces de indagar en el tema y probar varias soluciones he encontrado una la cual, por ahora me ha funcionado. Recuerda de que los estilos de CSS van muy en función al tamaño de la pantalla por lo que puede que no veas el problema en tu portátil/tablet/pantalla. Me he dado cuenta de ello ahora que tengo un iMac de 27" Oh boy...

Para que funcione le tenemos que aplicar estilos a 3 partes de tu web, a <html>, a tu container donde tengas el contenido y al <footer>.

Para la etiqueta <html> el estilo sería el siguiente:

html {
  min-height: 100%;
  position: relative;
}

Para la etiqueta <footer> el estilo sería el siguiente:

footer {
  bottom: 0;
  height: 100px; /* valor que necesites */
  position: absolute;
  width: 100%
}

Y a tu container tan solo tendrías que aplicarle al margen de abajo el mismo valor que tiene la altura de tu footer +- 20px dependiendo de la distancia que quieras dejar entre el contenido y el footer.

.container {
  margin-bottom: 120px;
}

Ya estaría, puedes ver el ejemplo en el codepen de abajo

See the Pen pdNoPR by Albert (@byverdu) on CodePen.

comments powered by Disqus