Footer siempre en la parte de abajo de la web (sticky footer)

‘Sticky footer’ o como hacer para que el footer de nuestra página web esté siempre en la parte de abajo. Todos nos hemos encontrado en algún momento con este problema que sucede cuando una página posee poco contenido (tan poco como para que nuestra página no ocupe todo el alto de la ventana del navegador) […]

‘Sticky footer’ o como hacer para que el footer de nuestra página web esté siempre en la parte de abajo.

Todos nos hemos encontrado en algún momento con este problema que sucede cuando una página posee poco contenido (tan poco como para que nuestra página no ocupe todo el alto de la ventana del navegador) por lo que nuestro footer puede quedar a la mitad de la página o incluso más arriba.

Sin sticky footer

 

Muchos de los desarrolladores no le prestan a esto mucha atención ya que piensan “mi web va a tener bastante contenido por lo que el footer aparecerá siempre abajo”, pero te puedes encontrar este problema en cualquier momento (por ejemplo: página de error 404 ‘página no encontrada’).

Para solucionar esto basta con introducir dos líneas en nuestro código HTML y unas cuantas más  en nuestro CSS. Normalmente el Body de un  HTML posee 3 partes: Cabecera, Contenido y Pie de página (header, content y footer). Para hacer que nuestro Footer esté siempre en la parte de abajo de la página tenemos que modificar este HTML y darle la siguiente arquitectura que será insertar un DIV que contenga al Header y al Footer.

<body>

  <div id="wrap">
    <div id="header">
      ... #Cabecera
    </div>
    <div id="content">
      ... #Contenido
    </div>     
  </div> <!-- Fin #wrap -->

  <div id="footer">
    ... #Footer
  </div>

</body>

Cuando ya tenemos esta arquitectura en nuestro HTML vamos a añadir algunos estilos a nuestro CSS. Le daremos un alto (height) del 100% a nuestro html, body y div con id=wrap, mientras que a nuestro footer le añadiremos las propiedades posición a relativa (position: relative), un margen por arriba (margin-top) igual a su alto (height) pero en negativo… mejor lo vemos en código.

html,
body,
#wrap{
  height: 100%;
}

#footer{
  position: relative;
  height: 70px; /* lo pongo así de ejemplo */
  margin-top: -70px;
}

Con sticky footer

Con estas pequeñas modificaciones en el código de nuestro proyecto tendremos el Footer siempre en la parte de abajo de abajo de nuestra página.