CSS: настройка высоты div под высоту экрана браузера

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

Если вам необходимо, чтобы div занимал всю высоту окна браузера, в CSS следует использовать значение 100vh, где vh сокращенно означает 100% высоты вьюпорта.

.full-height {
  height: 100vh; /* Превращаем высоту div в высоту небоскрёба */
}

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

Вопрос о процентах: отношение и расположение

В тех ситуациях, когда 100vh функционирует как общий ориентир, его значение может варьироваться в зависимости от высоты родительских контейнеров и контекста позиционирования. Чтобы устойчиво закрепить макет при условии, что div занимает задуманное пространство, следует установить элементам html и body высоту height: 100%:

html, body {
    height: 100%; /* Обеспечиваем надежный основание для наших потомков – элементов div */
}

Применение абсолютного позиционирования с помощью top: 0; и bottom: 0; заставляет div автоматически растянуться по вертикали, заполнив все доступное место. Помните, однако, что родительские элементы div не должны иметь абсолютного или относительного позиционирования, поскольку они могут "испортить" макет, вызывая нежелательные "препятствия" на пути!

Отметим, что 1vh равняется 1% высоты вьюпорта и функционирует как переменная величина, поддающаяся гибкой адаптации. Эта адаптивность в многоколоночном режиме потребует комбинации height: 100vh; и width: 50%; для формирования колонок равной высоты.

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

Вот простой визуальный пример того, как div занимает 100% высоты окна браузера:

🖥️ Окно браузера
|
|----------------|
|                |
|  🌐            |
|  div {         |
|    height: 100vh; | <- Заметьте, как этот `div` тянется вверх!
|  }               |    Он растягивается на всё отведенное
|                  |    вертикальное пространство.
|----------------|
|

Представьте div, функционирующий по принципу лифта: он непрерывно движется вверх ⬆️

Добавление «пиксельной пыли»: визуальное разделение

При работе с большим количеством элементов div, визуальное разграничение может быть очень полезным. Используйте свойство background-color для визуального усиления тех div, которые занимают всю доступную им высоту в сложных макетах.

.full-height {
    height: 100vh;
    background-color: #e0e0e0; /* Одели div в новый "костюм" */
}

В эпоху «Плавающего» и «Гибкого»

Конкретные техники с использованием свойства float могут помочь достичь устойчивого позиционирования. Но что делать, если div находится в контексте Flex или Grid? Не волнуйтесь! В контейнере flex родительский элемент может иметь значение display: flex;, тогда как дочерний div примет свойство flex: 1;.

Это свойство заставляет дочерний элемент расширяться, занимая все доступное пространство на вертикальной плоскости.

Путь к отзывчивости и совместимости с браузерами

Хотя наш герой 100vh надежно борется в большинстве современных браузеров, всегда стоит внимательно проверить кросс-браузерную совместимость! Opera Mini и некоторые мобильные браузеры могут интерпретировать vh по-своему, поэтому убедитесь, что у вас есть план действий для этих капризных браузеров.

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

1. Fun with Viewport Units | CSS-Tricks — Наглядное изучение работы vh и vw единиц в CSS.
2. height – CSS: Cascading Style Sheets | MDN — Официальное описание свойства height в CSS.
3. CSS Height, Width and Max-width | W3Schools — Практическое использование и учебные материалы по размерам в CSS.
4. css – Chrome / Safari not filling 100% height of flex parent | Stack Overflow — Дискуссия специалистов о решении проблем с заполнением 100% высоты в Flexbox.
5. Grid | Codrops — Глубокое изучение CSS Grid.
6. html – Make body have 100% of the browser height | Stack Overflow — Обсуждение и стратегии для достижения 100%-ной высоты элемента body.
7. The trick to viewport units on mobile | CSS-Tricks — Информация об единицах просмотра на мобильных устройствах.