Cuando hemos terminado un sitio no siempre nos aseguramos de que todos sus elementos se muestren correctamente, el footer es uno de los que comúnmente no se muestra como nosotros lo diseñamos, lograr que el footer siempre aparezca abajo se le conoce como Sticky Footer.
Pero ¿porqué tendríamos que preocuparnos de nuestro pie de página?, y es que con toda la tendencia responsiva o la navegación movil y las pantallas cada vez más grandes es posible que causen deficiencias en nuestro diseño y los footers no luzcan como nosotros deseamos.
¿Qué lo ocasiona?
El motivo principal de esto es la falta de contenido en nuestro sitio, podemos diseñar o maquetar en una pantalla y nuestro diseño luce hermoso, de repente vemos nuestra obra de arte en un equipo de mayor resolución y PUM!!! la desgracia.
La técnica para mantener nuestro footer al fondo de nuestro diseño se le conoce como Sticky Footer.
Solución 1.
See the Pen GEFlI by CSS Tianguis (@css-tianguis) on CodePen.
Personalmente no me agrada mucho esta solución, porque no considera que nuestro footer pueda cambiar, tendríamos que tener un footer que mantenga una altura fija en cualquier situación. No es una solución practica si queremos un sitio 100% responsivo, incluso si declaráramos una altura para cada breakpoint responsivo (celular, tableta, escritorio) no podríamos agregar más contenido sin antes actualizar las medidas en todos los breakpoints, lo que hace de este método difícil para su mantenimiento.
Solución 2.
See the Pen Sticky Footer - With jQuery by CSS Tianguis (@css-tianguis) on CodePen.
La considero una solución mucho más dinámica utilizando jQuery, unos podrán decir usar scripts para algo tan simple no es necesario, pero ¿porqué? finalmente nos ahorraría muchísimo tiempo ajustando uno y otra vez, además sitios como facebook o pinterest utilizan métodos similares.
¿Conoces otras formas de obtener un Sticky Footer? Compártenosla.
Amazon Auto Links: No products found.