Cómo crear div para llenar todo el espacio entre el encabezado y el pie de página div

Estoy trabajando en pasar de usar tablas para propósitos de diseño a usar divs (sí, sí, el gran debate). Tengo 3 divs, un encabezado, contenido y pie de página. El encabezado y el pie de página son 50px cada uno. ¿Cómo consigo que el pie de página div permanezca en la parte inferior de la página y el contenido div para llenar el espacio intermedio? No quiero codificar el contenido de la altura de los divs porque la resolución de la pantalla puede cambiar.

Solución Flexbox

Usando el diseño flexible podemos lograrlo al mismo tiempo que permitimos un encabezado y pie de página de altura natural. Tanto el encabezado como el pie de página se pegarán a la parte superior e inferior de la ventana gráfica respectivamente (al igual que una aplicación móvil nativa) y el área de contenido principal rellenará el espacio restante, mientras que cualquier desbordamiento vertical se desplazará dentro de esa área.

Ver JS Fiddle

HTML

 
...
...
...

CSS

 html, body { margin: 0; height: 100%; min-height: 100%; } body { display: flex; flex-direction: column; } header, footer { flex: none; } main { overflow-y: scroll; -webkit-overflow-scrolling: touch; flex: auto; } 

Para resumir (y esto vino del enlace CSS Sticky Footer proporcionado por Traingamer), esto es lo que utilicé:

 html, body { height: 100%; } #divHeader { height: 100px; } #divContent { min-height: 100%; height: auto !important; /*Cause footer to stick to bottom in IE 6*/ height: 100%; margin: 0 auto -100px; /*Allow for footer height*/ vertical-align:bottom; } #divFooter, #divPush { height: 100px; /*Push must be same height as Footer */ } 
Header
Content Text
Footer

Para ampliar la respuesta de Mitchel Sellers, ingrese su altura de div de contenido: 100% y asígnele un margen automático.

Para una explicación completa y un ejemplo, vea CSS Sticky Footer de Ryan Fait.

Como conoce el tamaño (altura) de su encabezado, colóquelo dentro del div de contenido (o use márgenes).

La posición absoluta le dará problemas si su contenido es más grande (más alto) que la ventana.

Una forma de hacer esto usando CSS Grid:

index.html

       
Header
Content
Footer

main.css

 body { margin: 0; } main { height: 100%; display: grid; grid-template-rows: 100px auto 100px; } section { height: 100%; } 

si intenta maximizar la altura de su div de contenido, en el complemento CSS

altura: 100%;

 #footer { clear: both; }