Me he encontrado con este mismo problema y no he podido solucionarlo más que usando Flexbox. El tema es relativamente sencillo (una vez te has peleado con la mitad de las respuestas ya dadas). Imaginemos que tenemos una estructura compuesta de CABECERA, CUERPO y PIE. <body> <div class="cabecera"></div> <!-- header --> <div class="cuerpo"></div> <!-- main --> <div class="pie"></div> <!-- footer --> </body> A ésta vamos a asignar la propiedad "display: flex" de Flexbox de esta manera: body { // El body (o cualquier otro <div>) hace de "contenedor padre" display: flex; flex-direction: column; } Asumimos, por ejemplo, que CABECERA y PIE tienen un tamaño asignado de: .cabecera, .pie { height: 10em; background-color: grey; } Ahora a CUERPO ya podemos añadirle una característica única que hará la magia: .cuerpo { flex-grow: 1; // En este caso CUERPO se comporta como "elemento hijo" background-colour: #333333; } De esta forma le estamos dando la altura sobrante al contenido en CUERPO, y éste impulsará PIE hacia la parte inferior de la pantalla, sea la altura que sea.