В веб-разработке ключевым моментом является создание адаптивных и визуально привлекательных веб-сайтов. Две часто используемые единицы CSS: 100vhи 100%часто используются для определения размера элементов на веб-странице. Хотя на первый взгляд они могут показаться похожими, между ними есть важные различия. В этой статье мы углубимся в различия между 100vhи 100%и рассмотрим различные методы их эффективного использования в ваших проектах.

Что такое 100vh:

Единица измерения vhобозначает высоту области просмотра, которая представляет собой процент от высоты окна браузера. Например, 100vhбудет соответствовать 100 % высоты области просмотра. Когда вы устанавливаете высоту элемента 100vh, он будет занимать все вертикальное пространство окна браузера, независимо от его содержимого. Это может быть особенно полезно для создания полноэкранных разделов или главных изображений, занимающих всю высоту области просмотра.

.hero-section {
   height: 100vh;
}

Работаем на 100 %:

С другой стороны, единица 100%обозначает процент высоты родительского контейнера. Если вы установите высоту элемента на 100%, он расширится и заполнит всю высоту родительского элемента. Это особенно удобно, если вы хотите, чтобы элемент занимал всю высоту своего контейнера, например боковую панель или область содержимого в макете.

.sidebar {
   height: 100%;
}

Ключевые отличия:

Подводя итог, можно сказать, что основная разница между 100vhи 100%заключается в их ориентирах:

• 100vhотносится к высоте области просмотра, представляющей полную высоту окна браузера.
• 100%относится к высоте родительского контейнера, что позволяет элементу расширяться, чтобы заполнить доступное пространство.

Выбор подходящего устройства:

Выбор между 100vhи 100%зависит от конкретных требований вашего веб-дизайна. Вот несколько сценариев, в которых каждый юнит будет полезен:

1. Полноэкранные разделы: используйте 100vhдля создания эффектных полноэкранных разделов, занимающих всю высоту области просмотра.

2. Вложенные контейнеры. При работе с вложенными контейнерами 100%идеально подходит для обеспечения того, чтобы элемент заполнил высоту своего родительского элемента независимо от изменений размера области просмотра.

Если у вас есть контейнер с прокручиваемым содержимым, использование 100%позволяет ему динамически регулировать свою высоту в зависимости от содержимого внутри, предотвращая ненужное переполнение.

3. Фиксированные верхние и нижние колонтитулы. При разработке фиксированных верхних и нижних колонтитулов рекомендуется использовать 100%, чтобы они охватывали всю ширину области просмотра, сохраняя при этом свое положение в макете.

В заключение отметим, что 100vhи 100%— это ценные единицы CSS, которые служат различным целям в веб-разработке. Понимая их различия, вы можете использовать их возможности для создания визуально привлекательных и адаптивных дизайнов. Если вам нужно заполнить всю область просмотра или расширить родительский контейнер, выбор подходящей единицы поможет вам добиться желаемого макета.

Не забудьте поэкспериментировать с обоими устройствами в разных сценариях, чтобы определить, какое из них лучше всего соответствует вашим потребностям. Приятного кодирования!