Принудительная прокрутка внутреннего гибкого поля с баннером, занимающим всю высоту области просмотра. ⇐ Html

[Гость]

У меня есть страница с баннером вверху. Под баннером я хотел бы добавить раздел со своим заголовком/телом/нижним колонтитулом. Заголовок должен находиться сразу под баннером, а нижний колонтитул всегда виден внизу страницы. Баннер и заголовок тоже всегда должны быть видны. Тело должно занимать остальную часть области просмотра.

Вот код html/css, демонстрирующий мою проблему:

``` HTML, тело { маржа: 0; высота: 100%; } .корень { высота: 100вх; дисплей: блок; гибкое направление: столбец; } .вершина { высота: 50 пикселей; гибкое сжатие: 0; } .контейнер { дисплей: гибкий; гибкое направление: столбец; минимальная высота: 0; гибкая термоусадка: 1; высота: 100%; } .содержание { дисплей: гибкий; гибкое направление: столбец; гибкий рост: 1; гибкая термоусадка: 1; переполнение: авто; минимальная высота: 0; } .header { гибкое сжатие: 0; } .header { гибкая термоусадка: 0; } ``` ``` Пример Лучшие Заголовок 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 Нижний колонтитул ```

В приведенном выше фрагменте удается сделать прокручиваемым элемент content, но при этом прокручивается и весь документ (т. е. вы не можете видеть top div и footer div одновременно).

В этом примере я могу исправить это, изменив высоту контейнера на calc(100vh - 50px) (высота родительского элемента минус высота ) верхний раздел.

Можно ли получить тот же результат без необходимости жестко запрограммировать что-либо в высоте контейнера? т. е. есть ли другой способ заставить container использовать только оставшееся пространство и обрабатывать внутреннее сжатие, используя единственную степень свободы, которую он имеет (то есть переполнение content) div)?

Это помечено как дубликат Заполните оставшееся вертикальное пространство CSS с помощью display:flex . На первый взгляд это кажется связанным, и «полноэкранная» версия принятого ответа звучит как ответ на этот вопрос, однако это не так; если я добавлю баннер перед разделом в ответе на вопрос, весь документ выйдет за пределы высоты баннера.