A todos en nuestros inicios se nos plantea el mismo problema: ¿Cómo podemos mantener el pie de la página siempre abajo? Pero ésta vez no quiero “abajo del contenido” sino abajo de todo; pegado al borde inferior de mi pantalla en caso que el contenido no rellene la misma, en caso de que la página tenga un largo scroll, etc.

Ésta es la técnica del wrapper, conocida por casi todos los maquetadores CSS, pero que yo tardé en descubrir (lo que tardé en usar google) y quiero compartirla hoy aquí.

La esctructura HTML que deberíamos tener es algo similar a esto:

<body>
  <div class="wrapper">
  <p>El contenido de tu web aquí.</p>
</div>
<footer class="footer">
  <p>Contenido del pié de la página.</p>
</footer>
</body>

Para ésto, creamos las siguientes propiedades CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: calc(100% - 4rem);
}
.footer {
  height: 4rem;
  background-color: #e2e2e2
}

Si necesitais ver un ejemplo puedes ver este codepen.