Al escuchar “pie de página pegajoso” en estos días, creo que la mayoría de la gente imagina un position: sticky situación en la que un elemento de pie de página aparece fijo en la pantalla mientras se encuentra en el contexto de desplazamiento de algún elemento principal.
Eso no es exactamente de lo que estoy hablando aquí. Los “pies de página fijos” eran un concepto de la interfaz de usuario antes position: sticky existía y significan algo ligeramente diferente. La idea es que ellos quédese en la parte inferior de la pantalla, incluso cuando el contenido de la página no sea suficiente para empujarlos allí. Pero si hay suficiente contenido, felizmente son rechazados.
Cubrimos cinco formas de hacer esto en años pasados, que incluían técnicas que son algo modernas, incluyendo calc(), flexbox y CSS Grid.
¡Entra un sexto retador! Lector Sílvio Rosa escribió con esto:
(Probablemente lo más fácil de verificar en una pantalla de escritorio de tamaño mediano, que es un poco donde los pies de página adhesivos importan más de todos modos).
Es más o menos esto:
html, body { height: 100%;}
body > footer {
position: sticky;
top: 100vh;
}Lo que me gusta de él es que no requiere ningún contenedor adicional especial para el contenido sin pie de página.
También es un poco estresante. Cuando yo veo top: 100vh; Creo que eso no funcionará porque empujará el pie de página fuera del área visible. Pero esa es la parte inteligente. Lo hará sin importar cuán grande sea el pie de página (sin números mágicos), y luego el posicionamiento adhesivo lo “absorberá” para pegarse a lo largo del borde inferior. Pero nunca se superpondrá al contenido, por lo que está feliz de ser empujado hacia abajo por debajo del contenido, que es un principio básico del patrón de pie de página adhesivo.