Я пытаюсь создать страницу, которая содержит три элемента div: верхний колонтитул, нижний колонтитул и область содержимого. Они должны занимать 100% экрана.

Верхний и нижний колонтитулы маленькие и не изменятся, область содержимого может быть любого размера, поэтому я добавилoverflow:auto чтобы сделать прокрутку, когда он становится слишком большим.

Проблема в том, что переполняет высоту экрана. Я создал скрипку, чтобы продемонстрировать:https://jsfiddle.net/tdxn1e7p/

Я использую следующий CSS для настройки HTML и высоты тела, поэтомуheight:100% трюк на контейнере будет работать:

html, 
body {
    height: 100%;
}

Структура моего документа:

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

Я нашел много вариантов решения таких проблем, какэтот вопрос, но не смог заставить ни один из ответов работать для меня.