Cómo mantener el footer en el fondo cuando no tenemos suficiente contenido.

4 formas de evitar ese feo espacio en blanco debajo de nuestro footer cuando el contenido de la página ocupa poco espacio.

jueves, 30 de junio de 2016
Categorías: Maquetación
Text_2

En toda web hay una página en la que el contenido es escueto y nos deja mucho espacio sobrante. Si no lo teníamos planeado quedará una fea franja en el centro de nuestra pantalla (el footer) y justo debajo un gran espacio en blanco. Esto en la mayoría de los casos no será agradable a la vista así que vamos a ver algunas formas de solucionarlo.

 

La forma sencilla cutre

Cambiamos el fondo general de la página al mismo color que el del footer.

Esto nos obligará a darle un fondo a todos esos espacios que usasen el fondo por defecto de la página y en la mayoría de los casos nos dejará media pantalla sin contenido en un color que teníamos pensado solo para un pequeño footer.

Bonita y sencilla pero usando flex

Está solución nos da el resultado que queremos de una forma muy sencilla pero tiene el inconveniente de que he utilizado flexbox para realizarla. Además de que el modelo Flex Box Layout está aún “en bragas”, es posible que dependiendo de la complejidad del diseño de la página nos sea difícil o imposible realizar la adaptación.

Cómo se puede ver hemos metido todas las etiquetas del ejemplo en un contenedor que llevará las propiedades display:flex y flex-direction:column, y a nuestro “section” principal le hemos dado la propiedad flex:1.

 

Usando solo HTML y CSS simples

Esta solución es muy simple, tan solo hay que darle que englobar toda la página menos el footer en un div contenedor y darle un min-height del 100%. También hay que darle un padding inferior igual al height del footer y a este darle un margin-top negativo igual a su altura.

Este proceso hará que el contenedor ocupe como mínimo el 100% de la pantalla y deje un espacio para que el footer se superponga sobre él.

Esto en algunos casos puede ser suficiente, como cuando estemos usando bootstrap que ya aplica la propiedad que necesitamos, pero en otros casos necesitamos incluir box-sizing:border-box a nuestro contenedor para que el padding esté incluido en su height.

Esta solución es muy parecida a la que explica Ryan Fait en esta entrada de su blog.

Vale, vale, creo que se lo que estás pensando: ¿Y si el height de mi web no es fijo? En ese caso tendríamos que usar javascript

 

Usando un poco de javascript

Esta solución es casi idéntica a la anterior solo que asignamos el valor a las propiedades margin-top del footer y padding-bottom del contenedor a través de javascript. No es que me guste usar javascript para esto, pero son solo 5 lineas de código e incluso menos si usáramos jQuery

Como se puede ver aquí da igual el contenido del footer que siempre se adaptará para posicionarse correctamente.

Deja en los comentarios qué opinas de estas opciones, cual te gusta más o si tu usas otra opción diferente.

TAGS

Compartir

Comentarios