¿Cómo mantener tu pie de página donde pertenece?

Programación

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-containerda 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 la absoluteposición basada en él más adelante.
  • El content-wraptiene 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 envoltura divse utiliza aquí, que contendría todos los demás contenido de la página.
  • El footerestá configurado en absolute, adhiriéndose al bottom: 0de page-containerestá adentro. Esto es importante, ya que no está absoluteen la ventana gráfica, pero se moverá hacia abajo si page-containeres más alta que la ventana gráfica. Como se indicó, su altura, establecida arbitrariamente 2.5remaquí, se usa en el content-wrapanterior.

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