Разрешить CSS Grid расти вертикально вместе с окном, заполняя оставшееся пространство ⇐ CSS

[Anonymous]

Я хочу увеличить сетку, чтобы заполнить оставшееся вертикальное пространство. Над календарем фиксированной высоты есть пара div, и я бы хотел, чтобы они оставались фиксированной высоты. По мере роста окна по вертикали я бы хотел, чтобы менялся только календарь, чтобы каждая строка росла равномерно, останавливаясь в нижней части окна без полос прокрутки.

* { размер коробки: граница-коробка; отступ: 0 пикселей; поле: 0 пикселей; } html, тело { фон: #92bde7; цвет: #485e74; семейство шрифтов: Tahoma, Женева, Вердана, без засечек; высота: 100%; } .выбор { отступ: 5 пикселей; } .header { дисплей: сетка; столбцы-шаблона сетки: повторение (7, 1fr); выравнивание текста: по центру; } .header>div { отступ: 4 пикселя; пробел: nowrap; переполнение: скрыто; переполнение текста: многоточие; } /* это элемент, который необходимо растянуть до оставшегося доступного пространства окна */ .календарь { дисплей: сетка; столбцы-шаблона сетки: повторение (7, 1fr); } /* эти элементы должны растягиваться равномерно по мере роста окна */ .календарь>div { выравнивание текста: по правому краю; пробел: nowrap; переполнение: скрыто; переполнение текста: многоточие; отступ: 0,5em; минимальная высота: 100 пикселей; } .пред>div, .следующий>div, .date>div { выравнивание текста: по левому краю; } .предыдущий, .следующий { фон: #c9e6ff; цвет: #666; } .дата { фон: #f9feff; ❮ 6/2018 ❯ Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота 30 31 1 Что нужно сделать... 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3