Понимание разницы между «100vh» и «100%» в CSS

Да, «100vh» — это не то же самое, что «100 %».

В CSS (каскадные таблицы стилей) «vh» обозначает высоту области просмотра, которая представляет собой процент от высоты окна браузера. Итак, «100vh» означает 100% высоты области просмотра. С другой стороны, «100%» относится к проценту высоты родительского элемента.

Вот несколько способов понять разницу и варианты использования каждого из них:

  1. “100vh”: если вы укажете высоту элемента как “100vh”, он будет занимать всю высоту области просмотра, независимо от длины содержимого. Обычно это используется для создания полноэкранных разделов или главных изображений, которые всегда должны занимать все окно браузера.

  2. “100%”: если вы установите высоту элемента как “100%”, он займет всю высоту родительского элемента. Это полезно, если вы хотите, чтобы элемент заполнил высоту своего контейнера, например элемент div внутри другого элемента div.

Важно отметить, что поведение «100vh» и «100%» может различаться в зависимости от конкретного контекста и свойств CSS, примененных к рассматриваемым элементам. Например, если родительский элемент не имеет определенной высоты, использование значения «100 %» не даст желаемого эффекта.