Sticky footer o pie siempre abajo: qué es. Viejas y nuevas formas de logralo 29.7.14
La estructura "Sticky footer" o "Pie siempre abajo". Qué es. Formas tradicionales de lograrla y algunas otras vías más modernas y con Css más actual de realizarlo.
Sticky footer o pie siempre abajo: qué es. Viejas y nuevas formas de logralo
Ampliado con el método Flexbox
¿Qué es el "Sticky footer" o pie siempre abajo?
Una estructura o forma de presentar los contenidos de una web. Su presentación más sencilla consiste en una sección principal y un pie de página.
En ocasiones se presenta también con un encabezado. Pero para su realización este tercer elemento es secundario y prescindible como elemento característico ya que tranquilamente puede estar englobado (estar dentro de) en la sección principal.
Características principales
La realización "Sticky footer" o "Pie siempre abajo" debe dar respuesta a estas dos situaciones:
- Colocar el pie de página en la parte inferior de la pantalla cuando el contenido de la sección principal es menor que la altura de la pantalla sin que se genere el scroll
- En el momento que dicho contenido aumente y sobrepase dicha altura debe empujar al pie de página para mostrarlo después del contenido y que no haya solapamiento entre ellos. Apareciendo el scroll, como es lógico, para acceder a todo el contenido.
Casos de uso
Por sus particularidades su empleo está motivado y pensado para documentos o webs en los que haya unas veces que la altura total de la web sea menor que la ventana o pantalla donde se muestra pero que en otras forzará la aparición del scroll.
Esto puede suceder o bien porque cambie el tamaño de la ventana (la web va a verse en distintas resoluciones) o bien porque el contenido cambie.
Lejos de reducirse los casos donde ésto puede suceder, hoy día han aumentado debido a que la disparidad de dispositivos y sus tamaños de pantalla son mucho más variados que cuando surgió la necesidad de la maquetación con "Sticky footer" o "Pie siempre abajo".
Solución al Sticky footer o Pie siempre abajo
La resolución a este planteamiento del "Sticky footer" o "Pie siempre abajo" ha ido evolucionando y ha estado en función de 2 aspectos, como todo en Css:
- Las herramientas disponibles en Css: propiedades y valores existentes.
- Navegadores (y versiones) a tener presentes.
La vieja y primigenia
La primera solucción satisfactoria proviene de los tiempos de IE6 y sus limitaciones. Especialmente su carencia de soporte a los pseudoelementos.
Esto obligaba a tener que utilizar un elemento extra en el marcado html.
<seccion>
<!--contenido-->
<corte></corte>
</seccion>
<pie></pie>
Todo se reduce a declarar una altura mínima del 100% a la sección principal (recuerda que al usar % tanto el html como el body lo tiene que tener declarado también).
A continuación al 'corte' y al 'pie' se le marca la misma altura a ambos (hay autores que la altura de 'corte' la logran declarando un padding verical en vez de height). Esto forzaría la aparición de espacio en blanco y/ scroll. Así que se compensa añadiendo un margen negativo a 'pie' del mismo valor que la altura anterior.
Esto lo que logra es evitar el scroll vertical cuando haya poco contenido y a la vez, en caso de que el contenido supere la altura evita que haya solapamiento entre el contenido de la sección y el pie.
* {margin: 0;}
html, body {
height: 100%;
}
seccion { /*Recuerda que existía IE6*/
height: auto !important;
min-height: 100%;
}
corte {
padding-top: 4em;
}
pie {
height: 3em;
margin-top: -3em;
}
Aún es posible encontrar en línea demos y construcciones reales de esta técnica. Un ejemplo lo tienes en araudi.net, obra de Mike Morote.
El viejo y semántico Sticky footer
La pega principal que siempre se le puso a esta solucción al "Sticky footer" o "Pie siempre abajo" era la necesidad de utilizar ese elemento vacío ('corte').
Desaparecida la necesidad de soportar a navegadores que no entendían de pseudoelementos se pudo prescindir del marcado extra y que fuese el pseudoelemento el que realizase esa función.
<seccion>
<!--contenido-->
</seccion>
<pie></pie>
* {margin: 0;}
html, body {
height: 100%;
}
seccion {
min-height: 100%;
margin-bottom: -3rem;/*Variación opcional*/
}
seccion:after {
content: "";
display: block;
}
seccion:after, pie {
height: 3rem;
/*Mismo valor que margen negativo de 'seccion'*/
}
Moderno "Sticky footer" o "Pie siempre abajo"
Como ves, entre las dos anteriores realizaciones no hay cambio en el proceso creativo para lograrlo. Es básicamente el mismo: hacer que la sección principal mida como mínimo el 100% de la ventana y hacerle un hueco (con el margen negativo) para que el pie se coloque en el fondo. Y el elemento extra ('corte') o el pseudoelemento se utiliza para que en caso de mucho contenido no haya solapamientos.
Sin embargo, con la llegada de nuevos desarrollos en Css ya es posible "pensar diferente" y hacer posible el "Sticky footer" o "Pie siempre abajo" de forma más sencilla.
Hay más de una vía. Pero en esta ocasión sólo te muestro una: el uso de unidades relativas al viewport (vh en concreto) y la función Css calc().
* {margin: 0;}
pie {
min-height: 5rem;
}
seccion {
min-height: calc(100vh - 5rem);
}
Un poco más adornado lo puedes ver en este pen de ejemplo
See the Pen gAECL by Kseso (@Kseso) on CodePen.
Así a bote pronto y sin sopesar se me ocurren otras formas de lograrlo actualmente. Pero en esta ocasión no las exploraré yo. Te dejo que seas tú quien busques. Sólo una sugerencia: el flexbox, su alineación vertical (en columnas) y su reparto del espacio entre los ítems del flex.
Flexbox. Más simple es imposible
A petición de algún lector amplío el post para incluir la versión del "Sticky footer" o "Pie siempre abajo" realizado con el flexbox:
See the Pen Flexbox for "Sticky footer" by Kseso (@Kseso) on CodePen.
La ventaja principal respecto a cualquiera de las demás vías es que no hay necesidad de conocer de antemano ningún valor relativo a las alturas. Tampoco importa si el contenido del pie de página necesita más o menos altura. Crece "hacia arriba" sin forzar la aparición del scroll mientras la sección principal tenga espacio sin ocupar por su propio contenido.
En la demo precedente verás que además de la sección principal y el pie de página he añadido un tercer bloque (header). Todo el Css necesario para lograr el "Sticky footer" o "Pie siempre abajo" con el flexbox es el siguiente (observa que se aprovecha al "body" para que sea el elemento flexible.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
section {
flex: 1;
}
Variaciones del "Sticky footer" o "Pie siempre abajo"
Sobre la realización básica del "Sticky footer" o "Pie siempre abajo" pueden hacerse un sinfín de variaciones. Todo dependerá de las necesidades de cada caso.
Recuerdo, y esto es una "batallita del abuelo", que en tiempos ha llegué a montar un "Sticky footer" o "Pie siempre abajo" en el que era el pie el que podía crecer pero hacia arriba (ocupando espacio de la sección principal).
![](https://www.pinterest.com/pin/create/button/?url=https://escss.blogspot.com/2014/07/sticky-footer-pie-siempre-abajo-css.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvudcAPpdyDU4XKrwOxtUdhyphenhyphenRaetLa95jwtpNk9Et_grNYdrLINP7_duyCpNQRKjebg4-W0PNqY3WuT0zfBLvoUjpPlwS_qzOY59Cgq18QB-k5X9nlf3GtvaDhXeF7IzeEldg_2fyU7W4/s1600/pie-abajo.jpg&description=La estructura "Sticky footer" o "Pie siempre abajo". Qué es. Formas tradicionales de lograrla y algunas otras vías más modernas y con Css más actual de realizarlo.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Hola. Para un lego ver la demo sin realmente ver el efecto de rodar el scroll pues nos deja como estábamos. Supongo que al no haber contenido de relleno no hay nada que 'ver' hacia abajo.
ResponderEliminarGracias de todas formas.
PD. los hover sobre FB y G+ no se visualizan en su lado derecho.
Buenas, Paco
EliminarLa demo está alojada en codepen por lo que sus códigos son totalmente accesibles y por lo tanto manipulables (editables) en su totalidad.
Sólo tienes que añadir contenido para ver su comportamiento.
Creo que más que quejarte de "ver la demo sin realmente ver el efecto" deberías haberte interesado por el funcionamiento de la web donde está alojado.
Un saludo
Muy sencillo método, gracias por compartir. Ahora a profundizar conocimientos sobre la propiedad flex
EliminarAbrazo!