Esta nota es para dedicada a mi futuro yo para no olvidar lo mínimo necesario a la hora de crear un layout con footer que se mantenga al final del web page. Veamos cómo hacerlo usando CSS clásico. Vamos a partir de un simple ejemplo en HTML:

<body>
  <div class="wrapper">
    <div class="header">
      <h1>Header</h1>      
    </div>
    <div class="content"></div>
  </div>
  <div class="footer">
    <p>Footer area text goes here.</p>
  </div>
</body>

A partir de ese HTML podemos usar el siguiente CSS:

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -80px; /* Aquí ocurre la magia */
}

.wrapper:after {
  content: "";
  display: block;
  height: 80px; /* Aquí también */
}

.footer {
  background-color: #AAA;
  height: 80px; /* Importante que la altura sea fija */
  width: 100%;
}

Ejemplo en CodePen.

La clave para lograr el efecto es restando a nuestro contendor el tamaño del footer. El contenedor puede ser el body o algún div.

El segundo método es usando el módulo de Flexbox Layout (Flexible Box). Siendo este medoto el mas moderno recomiendo visitar la guía A Complete Guide to Flexbox por
Chris Coyier

El CSS usando flex es el siguiente:

html {
 height: 100%;
 overflow: hidden;
}

body {
 height: 100%;
 padding: 0;
 margin: 0;
 overflow-y: scroll;
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
}

header {
 background: #AAA;
 -webkit-flex: 0 0 100px;
 -ms-flex: 0 0 100px;
 flex: 0 0 100px;
}

section {
 background: #EEE;
 -webkit-flex: 1 0 auto;
 -ms-flex: 1 0 auto;
 flex: 1 0 auto;
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
}

article {
 background: #EEE;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1;
}

footer {
 background: #888;
 -webkit-flex: 0 0 100px;
 -ms-flex: 0 0 100px;
 flex: 0 0 100px;
}

Ejemplo en CodePen .

El atajo flex: contiene los siguientes elementos flex-grow, flex-shrinkflex-basis. Para más detalles no olvides pasar por la guía A Complete Guide to Flexbox.

Parecera mucho pero es realmente debido al uso de los prefijos de cada navegador. Te animo a que visites Flexplorer para jugar un poco con todo esto del Flexbox Layout.