Contenido desplazable de encabezado y pie de página adhesivo

Estoy tratando de crear una página que contenga tres divs: un encabezado, un pie de página y un área de contenido. Estos deberían ocupar el 100% de la pantalla.

El encabezado y el pie de página son pequeños y no cambiarán, el área de contenido podría ser de cualquier tamaño, por lo que he agregadooverflow:auto para que se desplace cuando sea demasiado grande.

El problema es que desborda la altura de la pantalla. He creado un violín para demostrar:https://jsfiddle.net/tdxn1e7p/

Estoy usando el siguiente CSS para configurar el html y la altura del cuerpo, por lo que elheight:100% truco en el contenedor funcionará:

html, 
body {
    height: 100%;
}

La estructura de mi documento es:

<div style="height:100%;">
  <div>
    Header content
  </div>
  <div style="overflow:auto;">
    Body content... this could be very long
  </div>
  <div>
    Footer content
  </div>
</div>

He encontrado muchas variaciones en este tipo de problema, comoesta pregunta, pero no he podido hacer que ninguna de las respuestas funcione para mí.