Uno de los problemas a los que todo desarrollador web se enfrenta antes o después es al llamado "sticky footer" o, si preferís una versión castellanizada, "pie de página pegadizo".
Si aún alguien no sabe de lo que hablo, la necesidad de usar el sticky footer surge cuando queremos que nuestro <footer> se quede pegado al final de la página a pesar de haber espacio por encima en blanco (si no hacemos nada, el footer rellenará el espacio superior en blanco y se quedará ahí "flotando").
En esta entrada explicaré de una manera tremendamente sencilla cómo solucionar este problema utilizando exclusivamente CSS (nada de hacks en javascript) y además sin romper ni generar ningún tipo de incompatibilidad con Bootstrap para aquellos que lo utilicen.
Si aún alguien no sabe de lo que hablo, la necesidad de usar el sticky footer surge cuando queremos que nuestro <footer> se quede pegado al final de la página a pesar de haber espacio por encima en blanco (si no hacemos nada, el footer rellenará el espacio superior en blanco y se quedará ahí "flotando").
En esta entrada explicaré de una manera tremendamente sencilla cómo solucionar este problema utilizando exclusivamente CSS (nada de hacks en javascript) y además sin romper ni generar ningún tipo de incompatibilidad con Bootstrap para aquellos que lo utilicen.
Lo primero que vamos a hacer, por si todavía queda alguien a quien no le haya quedado claro el concepto, es mostrar un esquema de cómo queda una web tras usar el sticky footer:
Como vemos, buscamos que el footer se quede siempre abajo pegado, sin importar que haya espacio en blanco sobrante por arriba.
Si bien existen decenas de soluciones para todos los gustos en relación a cómo se resuelve este problema, la que voy a mostrar es, sin duda, la más sencilla que he logrado encontrar y la que mejor funciona. Además, la mayoría de las soluciones que he visto por ahí implican escribir manualmente la altura - height - del footer y jugar con los márgenes en CSS. Nada de eso encontraréis aquí, la altura es dinámica en función del contenido del footer, como debe ser.
A continuación, el código HTML de un sitio genérico:
Y aquí el CSS de dichas clases:
Este sencillo código podéis aplicarlo a CUALQUIER HTML que tengáis. Tan solo tenéis que añadir las clases CSS correspondientes y todo funcionará como la seda.
La cabecera <header> de la página es opcional, claro está, sin embargo, dado que la mayoría de sitios poseen una, he pensado que no estaría de más añadirla para mostrar cómo funciona. Pero no os preocupéis si no queréis añadirla, el sticky footer seguirá funcionando perfectamente con o sin ella.
Por cierto, para evitar cualquier tipo de problemas, yo recomiendo que no se "escriba" directamente sobre <header>, <main> y <footer>, sino que se añada un <div> dentro de cada uno de ellos y a partir de ahí ya se personalice todo lo que uno quiera.
Si deseáis ver un ejemplo algo más vitaminado, aquí os dejo uno:
Como veis, hemos resuelto un problema relativamente habitual de una manera simple y efectiva. Este método es compatible con todos los navegadores modernos tanto de escritorio (en el caso de Internet Explorer funciona bien a partir de la versión 9) como móviles.
Espero que resulte de interés general y ahorre muchos quebraderos de cabeza. Ya sabéis que para cualquier duda, problema o sugerencia, tenéis los comentarios.
Referencias:
Como vemos, buscamos que el footer se quede siempre abajo pegado, sin importar que haya espacio en blanco sobrante por arriba.
Si bien existen decenas de soluciones para todos los gustos en relación a cómo se resuelve este problema, la que voy a mostrar es, sin duda, la más sencilla que he logrado encontrar y la que mejor funciona. Además, la mayoría de las soluciones que he visto por ahí implican escribir manualmente la altura - height - del footer y jugar con los márgenes en CSS. Nada de eso encontraréis aquí, la altura es dinámica en función del contenido del footer, como debe ser.
A continuación, el código HTML de un sitio genérico:
Y aquí el CSS de dichas clases:
Este sencillo código podéis aplicarlo a CUALQUIER HTML que tengáis. Tan solo tenéis que añadir las clases CSS correspondientes y todo funcionará como la seda.
La cabecera <header> de la página es opcional, claro está, sin embargo, dado que la mayoría de sitios poseen una, he pensado que no estaría de más añadirla para mostrar cómo funciona. Pero no os preocupéis si no queréis añadirla, el sticky footer seguirá funcionando perfectamente con o sin ella.
Por cierto, para evitar cualquier tipo de problemas, yo recomiendo que no se "escriba" directamente sobre <header>, <main> y <footer>, sino que se añada un <div> dentro de cada uno de ellos y a partir de ahí ya se personalice todo lo que uno quiera.
Si deseáis ver un ejemplo algo más vitaminado, aquí os dejo uno:
Como veis, hemos resuelto un problema relativamente habitual de una manera simple y efectiva. Este método es compatible con todos los navegadores modernos tanto de escritorio (en el caso de Internet Explorer funciona bien a partir de la versión 9) como móviles.
Espero que resulte de interés general y ahorre muchos quebraderos de cabeza. Ya sabéis que para cualquier duda, problema o sugerencia, tenéis los comentarios.
Referencias:
No hay comentarios:
Publicar un comentario