Original article: How to keep your footer where it belongs ?

El pie de página es el último elemento de la página. Mínimamente, está al pie de tu pantalla, o más bajo si el contenido de la página es más alto que tu ventana. ¿Es simple, no?

Cuando estás trabajando con contenido dinámico que incluye un pie de página, ocurre a veces un problema donde el contenido de la página no es suficiente para llenarla. El pie de página, en vez de quedarse al pie de página donde nos gustaría que se quede, sube y deja un espacio en blanco debajo de sí.

Para una corrección rápida, puedes posicionar el pie de página al final de tu página. Pero esto viene con su consecuencia. Si el contenido crece y se vuelve más grande que la ventana, el pie de página se encuentra ‘atascado’ al final de la pantalla, lo queramos o no.

Esto demuestra el comportamiento que no queremos y aquel que si:

CmSel82bidnUEBQ5fnl1aWwQlwmj4h2eO0WI

Veamos como podemos lograrlo.

Obteniendo control sobre tu pie de página

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- todo el contenido de pagina -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* altura de pie de página */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* altura de pie de página */
}

¿Qué es lo que está haciendo?

  • El page-container va alrededor de todo lo que está en la página, y establece su altura a una mínima del 100% de la altura de la ventana(vh). Como es relative, sus elementos hijos pueden luego saetearse con una posición absolute.
  • El content-wrap tiene un relleno (padding) por debajo que es de la altura del pie de página, para asegurarnos que haya suficiente espacio para el pie de página dentro del contenedor donde ambos se encuentran. Un  div que los envuelve todo el otro contenido de la página es usado aquí.
  • El footer es fijado con absolute, manteniéndolo al bottom: 0 de la página page-container en la que se encuentra. Esto es importante, no esabsolute con respecto a la ventana, pero se moverá para abajo si el page-container es más largo que la ventana. Como está definido, su altura, arbitrariamente fijada a  2.5rem, es usada en el content-wrap arriba de la misma.

Y ahí lo tienes. ¡Tu pie de página se quedará adonde esperas que lo haga!

Toques finales

Obvio, esto es CSS, así que no estaría completo sin tener algunas consideraciones sobre el UX en usuarios con teléfonos móviles, y un enfoque alternativo usando min-height: 100% envés de 100vh. Pero esto trae sus consecuencias.

También se puede usar Flexbox(con flex-grow) o Grid, ambos son muy poderosos.

Cuál método usas lo dejo a tu criterio, y a las especificaciones de tu diseño. Espero que el ejemplo de arriba y los links de arriba te ahorren tiempo en tomar una decisión e implementarla.