Estou tentando criar uma página que contém três divs: um cabeçalho, um rodapé e uma área de conteúdo. Estes devem ocupar 100% da tela.

O cabeçalho e o rodapé são pequenos e não mudam; a área de conteúdo pode ter qualquer tamanho, então eu adicioneioverflow:auto para rolar quando estiver muito grande.

O problema é que ele excede a altura da tela. Eu criei um violino para demonstrar:https://jsfiddle.net/tdxn1e7p/

Estou usando o CSS a seguir para configurar o html e a altura do corpo, para que oheight:100% truque no contêiner funcionará:

html, 
body {
    height: 100%;
}

A estrutura do meu documento é:

<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>

Eu encontrei muitas variações nesse tipo de problema, comoessa questão, mas não consegui fazer nenhuma das respostas funcionar para mim.