Esta publicación también está disponible en coreano .
Un pie de página es el último elemento de la página. Como mínimo, está en la parte inferior de la ventana gráfica o más abajo si el contenido de la página es más alto que la ventana gráfica. Simple, ¿verdad? ?
Cuando se trabaja con contenido dinámico que incluye un pie de página, a veces se produce un problema en el que el contenido de una página no es suficiente para llenarlo. El pie de página, en lugar de quedarse en la parte inferior de la página donde nos gustaría que permaneciera, se eleva y deja un espacio en blanco debajo.
Para una solución rápida, puede colocar absolutamente el pie de página en la parte inferior de la página. Pero esto tiene sus propias desventajas. Si el contenido crece más que la ventana gráfica, el pie de página permanecerá "pegado" en la parte inferior de la ventana, lo queramos o no.
Esto muestra el comportamiento que no queremos y queremos:

Veamos un enfoque para lograr esto.
Controlar tu pie de página
index.html
:
main.css
:
#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }
Entonces, ¿qué está haciendo esto?
- El
page-container
da la vuelta todo en la página, y se define la altura mínima para el 100% de la altura de visualización (vh
). Tal como estárelative
, sus elementos secundarios se pueden configurar con laabsolute
posición basada en él más adelante. - El
content-wrap
tiene un relleno de fondo que es la altura del pie de página, asegurando que exactamente lo suficiente espacio se deja para el pie de página dentro del contenedor que son a la vez. Una envolturadiv
se utiliza aquí, que contendría todos los demás contenido de la página. - El
footer
está configurado enabsolute
, adhiriéndose albottom: 0
depage-container
está adentro. Esto es importante, ya que no estáabsolute
en la ventana gráfica, pero se moverá hacia abajo sipage-container
es más alta que la ventana gráfica. Como se indicó, su altura, establecida arbitrariamente2.5rem
aquí, se usa en elcontent-wrap
anterior.
Y ahí lo tienes. ¡Tu pie de página ahora permanece donde esperarías!
Toques finales
Por supuesto, esto es CSS, por lo que no estaría completo sin algunas consideraciones de UX específicas para dispositivos móviles y un enfoque alternativo usando en min-height: 100%
lugar de 100vh
. Pero esto tiene sus propios inconvenientes.
También se pueden utilizar Flexbox (con flex-grow) o Grid, y ambos son muy potentes.
El método que elija depende totalmente de usted y de los detalles de su diseño. Con suerte, el ejemplo anterior y los enlaces le ayudarán a ahorrar algo de tiempo al tomar su decisión e implementarla.
Gracias por leer. Aquí hay un par de otras cosas que he escrito recientemente:
- Una guía para principiantes del Elastic Container Service de Amazon
- Probando React with Jest and Enzyme