Anclar el footer de una página a la parte inferior sólo con CSS

En muchos desarrollo hemos visto la necesidad de tener un footer que siempre se encuentre en la parte inferior de la página, sin importar si el contenido principal es muy corto. Existen diversas técnicas para realizar esto, la mayoría de ellas basadas en javascript las cuales, siendo 100% funcionales, pueden llegar a ser difíciles de implementar.

En nuestra entrada de hoy vamos a ver una sencilla técnica para lograr este efecto basada únicamente en CSS, lo cual hace que su implementación sea muy sencilla y que no dependa de javascript para su funcionamiento.

• El HTML:

El código HTML que usaremos para este ejemplo es bastante sencillo, sólo usaremos un elemento section para el contenido y un elemento footer para la parte inferior.

1
2
3
4
5
6
<section>

  <h1>Contenido</h1>

</section>

<footer>

  <h1>Footer</h1>

</footer>

• El CSS:

En cuanto al CSS, lo definiremos de forma sencilla, usando sólo los elementos del ejemplo. Cabe anotar que hay varias propiedades a tener en cuenta para que nuestro código HTML y CSS funcionen bien en conjunto. Los elementos html y body deben tener un alto del 100%, el elemento section debe tener un alto mínimo de 100% y su margen inferior debe tener el mismo valor que el alto del footer pero en negativo. Si, parece un poco complicado, pero en la práctica es muy sencillo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html, body {

  height: 100%; //alto del 100% para que ocupe toda la pantalla

  margin: 0;

}



body {

  background-color: #0BF;

}



section {

  min-height: 100%; //alto del 100% para que ocupe toda la pantalla

  margin-bottom: -150px; // igual al alto del footer pero en negativo.

}



footer {

  height: 150px;

  background-color: #08B;

}

Como ven, esta técnica es muy fácil de implementar y es bastante efectiva ya que, al depender únicamente de HTML y CSS, podemos asegurar que su funcionamiento es el mismo en los navegadores más comunes.