Сделайте так, чтобы div занимал все доступное пространство по высоте. ⇐ CSS

[Гость]

Я работаю над страницей макета сетки CSS, где я хочу, чтобы контент div заполнял оставшееся пространство экрана после заголовка, но в итоге в нижней части страницы осталось пустое пространство. Есть идеи, как увеличить высоту или растянуть элемент div, чтобы заполнить все пространство, как показано на этом изображении? Веб-страница создана в Adobe Illustrator

Две секции слева должны иметь одинаковую высоту, я думаю, так и должно быть:

grid-auto-rows: 1fr; HTML

Путешествие Главная страница Блог Услуги Исследуйте мир вместе с нами Откройте для себя захватывающие дух места. Начните свое приключение сегодня!
Куда-то идешь?
Вы планируете поездку и чувствуете себя растерянным из-за множества доступных направлений, предложений и цен?
Мы вам поможем.
Мы здесь, чтобы помочь вам найти лучшие отели по самым конкурентоспособным ценам, предлагая вам выбор из сотен вариантов.
Подробнее Вас ждут незабываемые путешествия. Забронировать сейчас
CSS
* { маржа: 0; заполнение: 0; размер коробки: граница-коробка; семейство шрифтов: Arial, Helvetica, без засечек; цвет: #fff; } тело { фон: линейный градиент (30 градусов, #5ba591, #050a26); фоновый повтор: без повтора; максимальная ширина: 1200 пикселей; маржа: 0 авто; высота: 100%; } заголовок { столбец сетки: пролет 3; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: пространство между; отступ: 20 пикселей 30 пикселей; маржа: 0 авто; } заголовок навигации { дисплей: гибкий; выровнять-элементы: по центру; } заголовок навигация { текстовое оформление: нет; поле слева: 20 пикселей; } заголовок nav #profile-picture { отображение: встроенный блок; высота: 35 пикселей; ширина: 35 пикселей; фон: #ffffff; радиус границы: 50%; поле слева: 30 пикселей; } .wrapper-сетка { дисплей: сетка; разрыв: 30 пикселей; столбцы-шаблона сетки: 1fr 1fr 1fr; сетка-авто-строки: 1fr; максимальная ширина: 1200 пикселей; маржа: 0 авто; отступ: 30 пикселей; высота: расчет (100vh – 75 пикселей); } .о { столбец сетки: пролет 2; дисплей: сетка; разрыв: 30 пикселей; столбцы шаблона сетки: 1fr 1fr; выровнять-элементы: конец; отступ: 30 пикселей; радиус границы: 6 пикселей; цвет фона: rgba(5,10,38,0.3); } .о h1 { размер шрифта: 3rem; } .о п { размер шрифта: 1.2rem; } в стороне { сетка-столбец: 3; строка сетки: диапазон 2; дисплей: сетка; разрыв: 30 пикселей; отступ: 30 пикселей; радиус границы: 6 пикселей; цвет фона: rgba(14,155,134,0.2); } в сторону статьи p { отступ: 10 пикселей 0; } кнопка в сторону { оправдать себя: центр; фон: #000; вес шрифта: 600; граница: нет; отступ: 10 пикселей 30 пикселей; радиус границы: 6 пикселей; } .призыв к действию { столбец сетки: пролет 2; дисплей: сетка; оправдание-содержание: центр; выровнять-элементы: по центру; отступ: 30 пикселей; граница: #5ba591, сплошная, 1 пиксель; радиус границы: 6 пикселей; радиус границы: 6 пикселей; } .кнопка призыва к действию { оправдать себя: центр; фон: #ffc500; цвет: #000; вес шрифта: 600; граница: нет; отступ: 10 пикселей 30 пикселей; радиус границы: 6 пикселей; }