Получить профессию в Skypro
Различия высоты 100% и 100vh в CSS: проблемы и решения
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Свойство CSS height: 100vh; обеспечивает заполнение всей высоты видимого экрана элементом, не зависимо от его родительских блоков. В свою очередь, height: 100%; работает на основе высоты родительского элемента и не гарантирует полное заполнение видимой области. Использование 100vh предпочтительнее для заполнения всего экрана, т.к. это исключает вероятность ошибок в расчётах.
/* Элемент займёт всю видимую область экрана, вне зависимости от родительских элементов */
.full-screen {
height: 100vh;
}Однако, на мобильных устройствах значение 100vh может быть изменено при скрытии адресной строки. На десктопе полоса прокрутки может влиять на параметр vw, вызывая сдвиги в черновике вашего проекта.
Разъяснение различий
Единицы измерения видимой области и их зависимость от родительского элемента
Единицы измерения vw, vh, vmin, vmax основываются на величине видимой области экрана. Свойство height: 100% требует чтобы родительский элемент имел установленную высоту 100% на всех уровнях, вплоть до <html> и <body>.
Адаптивный дизайн
Единицы vw и vh прекрасно подходят для адаптивного дизайна, позволяя элементам корректно масштабироваться под разные размеры экрана:
/* Размер текста масштабируется в зависимости от размеров окна просмотра */
.body-text {
font-size: calc(.5vh + .5vw);
}Но значение 100vh на мобильных устройствах может изменяться при изменении ориентации или появлении панели инструментов.
Учет содержимого, превышающего видимую область экрана
Использование height: 100vh может привести к невозможности прокрутки, если содержимое больше по размеру, чем видимая область экрана. В этом случае необходимо обеспечить контроль прокрутки с помощью CSS либо динамическую корректировку высоты через window.innerHeight в JavaScript.
Визуализация
Сравним каждый подход с картиной на мольберте: HTML это фиксированный эскиз, BODY – картина, адаптирующаяся под восприятие зрителя.
HTML (🖼️🎨):
▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓ <-- Части картины остаются скрытыми, если стена (элемент <html>) не достаточно "высока".
▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓BODY (🖼️🎨):
▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓ <-- Пропорции элемента подстраиваются в пределах видимой области, позволяя увидеть полностью всю картину.
▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓Свойство Height 100vh гарантирует отображение всей картины без прокрутки, будто это универсальный холст для всех ситуаций.
Практическое использование 100vh и 100%
Захватывающие пользователей секции на весь экран
100vh идеально подойдет для создания приветственных экранов или герой-блоков, которые заполняют полностью весь экран, создавая сильное визуальное впечатление.
Вложенные конструкции
Для вложенных элементов в сложных дизайнах более подходящим является использование height: 100%, что обеспечивает логическое наследование размеров и соответствие содержимого размерам родительских элементов.
Панели инструментов на мобильных устройствах
Изменения в видимой области экрана на мобильных устройствах требуют динамической коррекции высоты или использования специальных функций CSS, чтобы сохранить пропорции, с учетом особенностей и съемных панелей в операционной системе iOS.
Прокрутка допустима
При создании прокручиваемого контейнера в пределах элемента на весь экран использование 100vh в сочетании с overflow: auto решает проблемы с переполнением, сохраняя размеры контейнера в рамках видимой области.
Полезные материалы
- Использование единиц окна просмотра для создания отзывчивой типографики
- Анализ точности вычислений при работе с CSS и Sass
- Руководство по адаптации шрифтов под разные размеры экрана
- Решения для корректного соотношения сторон встроенного контента
- Руководство по использованию размерных параметров в CSS
- Обсуждение поведения 100vh на мобильных устройствах на Stack Overflow