Как реализовать вертикально растягиваемый полноэкранный макет? ⇐ CSS

[Гость]

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

body { маржа: 0; заполнение: 0; } .макет { высота: 100вх; дисплей: гибкий; гибкое направление: столбец; цвет фона: желтый; } .layout__content { высота: 100%; выровнять-самостоятельно: растянуть; цвет фона: синий; } .содержание { ширина: 100%; высота: 100%; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; цвет фона: зеленый; } .content__text { цвет фона: белый; } .footer { высота: 20вх; цвет фона: красный; Здесь будут драконы

Как видите, если вы измените значение height в .footer, то содержимое заполнит все пространство, оставшееся от нижнего колонтитула. Все работает как задумано.

Сейчас пытаюсь сделать другой макет. Если общая высота содержимого и нижнего колонтитула не превышает 100vh, это отображение аналогично тому, что было раньше. Но если он превышает из-за высоты содержимого, то должен появиться скролл.

body { маржа: 0; заполнение: 0; } .макет { минимальная высота: 100vh; дисплей: гибкий; гибкое направление: столбец; цвет фона: желтый; } .layout__content { высота: 100%; выровнять-самостоятельно: растянуть; цвет фона: синий; } .содержание { ширина: 100%; высота: 100%; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; цвет фона: зеленый; } .content__text { высота: 150вх; цвет фона: белый; } .footer { высота: 20вх; цвет фона: красный; Здесь будут драконы

В этом примере текст имел длину 150vh. Но проблема в том, что если это значение будет удалено, контент рухнет.

body { маржа: 0; заполнение: 0; } .макет { минимальная высота: 100vh; дисплей: гибкий; гибкое направление: столбец; цвет фона: желтый; } .layout__content { высота: 100%; выровнять-самостоятельно: растянуть; цвет фона: синий; } .содержание { ширина: 100%; высота: 100%; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; цвет фона: зеленый; } .content__text { цвет фона: белый; } .footer { высота: 20вх; цвет фона: красный; Здесь будут драконы

Примечания:
[*]Я хочу изменить атрибуты только layout и layout__content. [*]footer может иметь любую высоту, поэтому невозможно просто жестко закодировать height, min-height, max-height< /code> и т. д. в других элементах. В примере он был жестко запрограммирован как 20vh, но это только в примере.
Я уже пробовал следующее:
[*]макет – высота: 1 пиксель; [*]layout-content - min-height: inherit; [*]layout-content - min-height: 100%;
Итак, есть идеи?