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