¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

Hay muchas maneras de anclar en la parte inferior de la pantalla (o página mejor dicho), en esta entrada veremos una de ellas; en lo personal, esta es una de las formas que más me gusto debido a su sencillez y por lo tanto, pocos problemas de implementar; veamos:

Definiendo el HTML

En el HTML no hay mucho que definir o decir; básicamente necesitamos al menos el cuerpo del documento (representado por el tag section) y un footer (representado por el tag footer) que es el que vamos a anclar en la parte inferior de la pantalla; el siguiente código fue desarrollado pensando en lo expuesto:

<section>
<h1>Contenido</h1>
</section>
<footer>
  <h1>Footer</h1>
</footer>

Definiendo el CSS

Una vez más, definimos nuestro CSS como queramos, aquí solo mostramos las secciones más importantes; hay dos puntos que es importante notar del CSS anterior:

• La propiedad margin-bottom del cuerpo del documento (section); debe ser de las mismas dimensiones que el alto del footer pero en negativo; en otras palabras: section.margin-bottom = footer.height*-1
• La propiedad min-height del cuerpo del documento (section) debe de estar establecida en 100% para que el alto mínimo ocupe toda la pantalla.

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

body {
  background-color: #0BF;
}

section {
  min-height: 100%;
  /* igual al largo del footer */
  margin-bottom: -150px;
}

footer {
  height: 150px;
  background-color: #08B;
}

Resultado Final