Как настроить полную высоту экрана, но позволить основному контенту заполнять только оставшуюся высоту под заголовком? [ ⇐ CSS

[Anonymous]

Я хочу настроить заголовок приложения в корневом макете. Ниже находится основной контент (отрисованная страница). Основной контент должен заполнять оставшееся вертикальное пространство страницы.
Я подумал, что можно придать всему высоту 100 %, вот так
< div class="snippet">

Код: Выделить всё

html {
height: 100%;
}

body {
margin: 0;
height: 100%;
}

.app-container {
height: 100%;
}

header {
display: flex;
justify-content: space-between;
}

main {
height: 100%;
}

.page-container {
height: 100%;
}

Код: Выделить всё

Logo
Title
Version




Page content goes here

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

Код: Выделить всё

html {
height: 100%;
}

body {
margin: 0;
height: 100%;
}

.app-container {
height: 100%;
display: flex;
flex-direction: column;
}

header {
display: flex;
justify-content: space-between;
}

main {
flex-grow: 1;
}

.page-container {
height: 100%;
}

Код: Выделить всё

Logo
Title
Version




Page content goes here

К сожалению, это не решило проблему. В основном я ищу


Как мне решить эту проблему?

Подробнее здесь: https://stackoverflow.com/questions/793 ... ining-heig