Cómo hacer un footer responsive en HTML y CSS

hace 2 años · Actualizado hace 2 años

En el artículo de hoy voy a explicarte como implementar correctamente un footer usando HTML y CSS. También puede que te interese el artículo sobre como hacer un menú responsive usando HTML y CSS.

¿Qué vas a encontrar en este artículo? Vas a aprender cómo hacer un footer que cumpla lo siguiente:

Que se mantenga en la parte inferior de la página

Responsive

▶︎ Además, si estás aprendiendo a utilizar HTML y CSS, te recomiendo el siguiente libro sobre el tema:

HTML, CSS y JavaScript Ver en Amazon

Índice

1. Montar el footer en HTML
2. Darle estilos en CSS
1. Adaptado a la parte inferior de la página
2. Footer responsive

1. Montar el footer en HTML

Para implementar el footer puedes usar la etiqueta div, pero es mucho más correcto a nivel estructural utilizar la etiqueta footer, así que yo te recomiendo que la uses. Dentro de las etiquetas <footer></footer> es donde incluirás el contenido que quieras poner en el footer.

2. Darle estilos en CSS

Para darle estilos al footer, y que podamos implementar las funciones que nos interesan en CSS, podemos hacerlo de tres maneras:

Asignándole una clase al footer
Asignándole un id al footer
Usando directamente la etiqueta Footer

Para este caso, y teniendo en cuenta que lo más lógico es que en nuestra página web sólo haya un footer, vamos a usar la etiqueta del footer para añadir los estilos.

Adaptado a la parte inferior de la página

Para que el footer se adapte a la parte inferior en lugar de subirse cuando la página no tiene suficiente contenido, debemos hacer unos pequeños ajustes.

La idea, de una manera más gráfica, sería la siguiente:

footer adaptado a la parte inferior de la página

Para ello, hay que plantear el contenido de la web de la siguiente manera:

Haz que el documento ocupe todo el alto de la página (pon height:100% para el html y body).
Encapsula todo el contenido de tu página en un contenedor que también ocupe el 100% del alto y tenga posición relativa.
El contenido de tu página tendrá un padding abajo igual o mayor que el alto del pie de página.
El pie de página estará posicionado de manera absoluta abajo del contenido que encapsula todo.

El código de CSS sería algo tal que así:

html, body {
  margin:0;
  padding:0;
  height:100%;
}

#pagina {
  position: relative;
  min-height: 100%;
}

#contenido {
  padding-bottom:50px; /* este valor debe ser igual o mayor al alto del pie */
}

footer{
  height:50px;
  line-height:50px;
  bottom:0;
  left:0;
  width:100%;
}

Footer responsive

Para que nuestro footer sea responsive, tenemos que usar media queries, o al menos es la forma más práctica de hacerlo. Dentro de cada media query, especificaremos como queremos que se vean los elementos del footer para el tamaño de la pantalla.

Para saber cuales son las medidas recomendadas para cada tipo de pantalla, te recomiendo que uses las siguientes:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}