Установка высоты DIV в процентах от экрана в CSS

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

Для задания высоты блока DIV в процентах от высоты экрана используйте CSS-единицу измерения vh, где 1vh соответствует 1% высоты видимой области экрана. Так, указание 50vh приведет к тому, что DIV займет половину высоты экрана.

.height-50-percent {
  height: 50vh; /* Пространство расширено наполовину! */
}

Для применения этого CSS-стиля к вашему DIV используйте следующую HTML-разметку:

<div class="height-50-percent"></div>

Такой метод автоматически корректирует размеры DIV до половины высоты окна браузера.

Учет высоты родительского элемента

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

Установка высоты в процентах подразумевает явно заданную высоту для родительского элемента. Обычная практика — устанавливать высоту элементов html и body равной 100%:

html, body {
  height: 100%; /* Полное использование доступного пространства! */
}

Этот подход позволяет дочерним элементам задавать свою высоту в процентах относительно полной высоты экрана.

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

Решение на весь экран с абсолютным позиционированием

В случае неназначенной высоты родительских элементов можно использовать абсолютное позиционирование, чтобы элемент охватывал весь экран:

.full-screen-absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;  /* Полный контроль над границами, ни один пиксель не ускользнет! */
}

Комбинация единиц измерения и стилей

Гибкое решение: сочетание vh и процентов

При создании макетов, где необходимо учесть размер окна браузера и процентные пропорции, сочетайте относительные (процентные) и абсолютные (vh) единицы измерения:

.responsive-height {
  height: calc(70vh – 20%); /* Думаем нешаблонно! */
}

Этот подход позволит элементу DIV гибко приспосабливаться под изменения размеров экрана и его контекст в документе.

Полноэкранный адаптивный блок

В адаптивном дизайне используйте 100vh, чтобы создать элемент, занимающий всю высоту экрана:

.full-screen-responsive {
  height: 100vh;
  width: 100%;  /* Отзывчивость на максимуме */
}

В этом случае DIV будет масштабироваться в соответствии с размерами экрана.

Управление высотой через JavaScript

Для точного управления размерами используйте JavaScript или такие библиотеки, как jQuery, чтобы задать высоту DIV динамически:

document.querySelector('.dynamic-height').style.height = window.innerHeight + 'px'; /* Взлетаем и падаем в зависимости от высоты экрана */

Такой подход обеспечит непосредственную синхронизацию высоты DIV с текущими размерами видимой области, обеспечивая его адаптивность при изменении размера окна браузера.

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

Представьте высоту блока DIV как процент от высоты многоэтажного здания:

🖥 Экран Монитора: |================|
                     🏢 = 100%

Высоту вашего DIV считайте за этаж в этом здании:

🖥 Этаж в здании 🏢: |====== 💼 ======|
                       💼 = Ваш DIV 50%

Используя проценты, вы сразу видите, какую часть экрана занимает ваш DIV:

🖥 Размер Экрана:    |============ 100% ============|
🏢 Высота DIV:       |==== 50% ====| или |== 30% ==|

Так, DIV высотой 50% будет занимать половину высоты вашего "небоскреба".

Решение других задач верстки

Учет наличия шапки

Если ваш макет включает шапку, вы должны учесть оставшееся доступное пространство для DIV:

.main-content {
  height: calc(100vh – 60px); /* Шапка не помешает: 60px и проблема решена! */
}

Функция calc() позволит вычесть размеры шапки, сохраняя заданный процент высоты экрана для DIV.

Обеспечение стабильного отображения в различных браузерах

Поскольку обработка единицы измерения vh может отличаться в разных браузерах, возникнет необходимость обеспечения единообразного отображения, возможно, с применением резервных CSS-стилей или функции feature detection в JavaScript.

Когда оправдано использование inline-стилей

В некоторых случаях, когда требуется быстро создать макет, использование inline-стилей может быть оправданным:

<div style="height: 75vh;"></div>  /* Быстро и просто! */

Однако внешние файлы стилей обеспечивают более удобное управление и возможность масштабирования во времени.

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

1. MDN Web Docs: CSS значения и единицы измерения — рассмотренны процентные значения CSS и другие единицы измерения.
2. Stack Overflow: Абсолютное позиционирование относительно родителя — детальное обсуждение позиционирования элементов.
3. W3Schools: Работа с DIV на полную высоту окна браузера — инструкции по созданию DIV, занимающего все доступное вертикальное пространство.
4. SitePoint: Сохранение пропорций изображений в адаптивной верстке — стратегии поддержания пропорций изображения при адаптивной верстке.
5. CSS-Tricks: Блоки с фиксированным соотношением сторон — методы создания блоков с определенным соотношением сторон для масштабируемой графики.