Получить профессию в 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 идеально подойдет для создания приветственных экранов или герой-блоков, которые заполняют полностью весь экран, создавая сильное визуальное впечатление.
Вложенные конструкции
Для вложенных элементов в сложных дизайнах более подходящим является использование height: 100%, что обеспечивает логическое наследование размеров и соответствие содержимого размерам родительских элементов.
Панели инструментов на мобильных устройствах
Изменения в видимой области экрана на мобильных устройствах требуют динамической коррекции высоты или использования специальных функций CSS, чтобы сохранить пропорции, с учетом особенностей и съемных панелей в операционной системе iOS.
Прокрутка допустима
При создании прокручиваемого контейнера в пределах элемента на весь экран использование 100vh в сочетании с overflow: auto решает проблемы с переполнением, сохраняя размеры контейнера в рамках видимой области.
Полезные материалы
- Использование единиц окна просмотра для создания отзывчивой типографики
- Анализ точности вычислений при работе с CSS и Sass
- Руководство по адаптации шрифтов под разные размеры экрана
- Решения для корректного соотношения сторон встроенного контента
- Руководство по использованию размерных параметров в CSS
- Обсуждение поведения 100vh на мобильных устройствах на Stack Overflow