Una solución moderna de "pie de página adhesivo" usaría flexbox.
tl; dr:: Un recipiente (cuerpo) para display:flex y el niño (pie de página) que desea mover hacia abajo para margin-top:auto.
Primero, configuramos el cuerpo para "flexionar" sus elementos verticalmente, asegurándonos de que sea 100% alto.
Luego establecemos flex: 0 0 50px en el elemento del pie de página, lo que significa: "no crecer, no encoger y tener una altura de 50px". De hecho, podríamos omitir el atributo flex y simplemente ir con height:50px.
Podemos establecer display:flex en cosas como el <body> sí un tanto imprudentemente, porque los niños de un recipiente flex tienen un valor implícito de flex: 0 1 auto si se omite, que es (casi) equivalente a flex:none (que es la abreviatura de flex:0 0 auto)
Es el margin:auto que nos da lo que queremos. Aplicados dentro de un contenedor flexible, los márgenes automáticos adquieren un nuevo significado, en lugar de la habitual "obtener la misma cantidad de espacio libre", significan "absorben TODO el espacio libre disponible".
De la especificación (8.1. Aligning with auto margins):
Antes de alineación a través de justificar-contenido y alinear-yo, cualquier espacio libre positiva se distribuye a los márgenes de automóviles en esa dimensión.
Dicho de forma más simply:
Si se aplican los márgenes de automóviles a un elemento de flexión, que el artículo será automáticamente ampliar su margen específico para ocupar el espacio adicional en el flex contenedor
Aparte: el enfoque de diseño de "Flexbox" "normal" probablemente sea flexionar una sección central ala <div id="main>...</div> al 100% verticalmente, que también haría que un pie de página se "pegue" en la parte inferior. Este enfoque nos muestra que el modelo de caja flexible es, de hecho, lo suficientemente flexible como para permitirnos cambiar el tamaño/mover elementos aislados.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#footer {
background-color: #efefef;
flex: 0 0 50px;/*or just height:50px;*/
margin-top: auto;
}
<p>we've assumed only that there's random space-taking content above the footer...</p>
<p>lorem ipsum dolor flex...</p>
<div>
<p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>