Отказ от ответственности: принятый ответ дает идею решения, но я нахожу его немного раздутым с ненужными правилами оболочки и CSS. Ниже представлено решение с очень небольшим количеством правил CSS.
HTML 5
Header with an arbitrary height This container will grow so as to take the remaining height CSS
body { display: flex; flex-direction: column; min-height: 100vh; /* body takes whole viewport's height */ } main { flex: 1; /* this will make the container take the free space */ }
Решение выше использует единицы просмотра и flexbox , и поэтому IE10 +, используя старый синтаксис для IE10.
Codepen для воспроизведения с: ссылкой to codepen
Или этот, для тех, кому нужен прокручиваемый основной контейнер в случае переполнения содержимого: ссылка на codepen