Заполнить оставшееся пространство высоты экрана с div в CSS

Быстрый ответ

Чтобы заполнить доступное вертикальное пространство, воспользуйтесь CSS Flexbox. Примените к родительскому контейнеру стили display: flex; flex-direction: column; height: 100vh;, а дочернему div присвойте flex-grow: 1;.

.container {
  display: flex;
  flex-direction: column; /* Слои, подобные торту */
  height: 100vh; /* Высота соответствует видимой области экрана */
}

.stretch {
  flex-grow: 1; /* Равномерное растяжение зазоров  */
}

<div class="container">
  <div>Верхний блок</div>
  <div class="stretch">Заполнение свободного пространства</div>
  <div>Нижний блок</div>
</div>

Элемент с классом .stretch растянется так, чтобы занять все неиспользованное пространство внутри .container, подобно губке.

Завершение

Подготовка

Проверьте, что для тегов html и body указана высота height: 100% для покрытия всего видового поля, что позволит вложенным элементам рассчитывать свою высоту относительно родительского элемента.

html, body {
  height: 100%; /* Полное покрытие видового поля экрана */
}

Подробнее об этом расскажет наш спикер на видео

Секреты Flexbox

Для контента с динамической высотой установите для #header значение flex-grow: 0;, а div внутри #content настройте с использованием flex: 1 1 auto.

#header {
  flex-grow: 0; /* Фиксируем высоту заголовка */
}

#content {
  flex: 1 1 auto; /* Растягиваем основной контент */
}

Управление переполнением

Если содержимое выходит за пределы окна, добавьте к div внутри #content класс .scroll-y и установите стиль overflow-y: auto;.

.scroll-y {
  overflow-y: auto; /* Автоматическая прокрутка при переполнении */
}

Визуализация

Визуализируйте экран как стакан 🥤, в котором находятся кубики льда 🧊 и свободное пространство между ними.

🥤 = Экран
🧊 = div

Добавим первый кубик льда:

🥤
🧊

Теперь оставим в стакане место для последнего кубика льда:

🥤
🧊
💧💧💧 (заполненное пространство)
🧊 (Последний элемент)

Здесь мы видим формирование div, занимающего оставшуюся высоту экрана.

Экран: 🥤
Первый Div: 🧊
Заполненное пространство: 💧💧💧
Второй Div (Заполняющий остаток): 🧊

Равновесие достигнуто: без пробелов и потерь.

Контроль высоты: ключевые моменты

Calc – наш верный помощник

Для оптимального использования пространства, если у вас имеются заголовки и подвалы с фиксированной высотой, установите для #content высоту через calc(100% – высота заголовка и подвала).

#content {
  height: calc(100% – 120px); /* Предположим, что высота заголовка и подвала – по 60px */
}

Совместимость с браузерами

Чтобы обеспечить совместимость Flexbox с разнообразными браузерами, обратитесь к ресурсу Can I use. Для устаревших браузеров не забудьте о префиксах -ms-, а также о полифиллах, например, FlexieJS. Кроме того, в качестве альтернативы можно использовать CSS-таблицы.

Адаптивность и отзывчивость

Используйте CSS-запросы @media для адаптации к различным размерам экранов, чтобы обеспечить гибкость дизайна на всех устройствах.

Альтернативные стратегии верстки

Для браузеров, которые не поддерживают Flexbox, важно иметь надежный запасной вариант верстки. В качестве такого варианта можно использовать CSS-таблицы.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — станьте гуру Flexbox, вдохновляясь этим подробным руководством.
2. Основные концепции flexbox – CSS: Cascading Style Sheets | MDN — разберитесь в деталях Flexbox благодаря этому руководству от Mozilla.
3. CSS Flexbox (Flexible Box) — изучайте Flexbox пошагово с помощью интерактивных уроков.
4. Распространяем гибкое будущее веб-дизайна с помощью лучших практик Flexbox — Smashing Magazine — оптимизируйте ваши CSS-шаблоны, следуя этим методикам.
5. Flexbox | Codrops — практически исследуйте все свойства Flexbox.
6. Модуль макета CSS Flexible Box Level 1 — внедряйте стандарты с помощью описания Flexbox Layout от W3C.