CSS Units - Какая разница между vh / vw и%?

138

Я только что узнал о новом и необычном модуле CSS. vhи vwизмерьте процент высоты и ширины области просмотра соответственно.

Я посмотрел на этот вопрос из Stack Overflow, но он заставил юниты выглядеть еще более похожими.

Как работает vw и vh unit

Ответ конкретно говорит

vw и vh - это процент от ширины и высоты окна, соответственно: 100vw - это 100% ширины, 80vw - 80% и т. д.

Это похоже на то же самое, что и на %единицу, что более распространено.

В Developer Tools я попытался изменить значения с vw / vh на% и наоборот и получил тот же результат.

Есть ли разница между ними? Если нет, то почему были введены эти новые подразделения CSS3?

css viewport-units

— Ричард Гамильтон
источник

7

Что делает vw / vh, так это удаляет зависимость от любого родителя и позволяет изменять размеры в зависимости от размера области просмотра.

— Наклейки

2

Читатель, ответ IanC вполне может спасти ваш день, обязательно проверьте его.

— Скиппи ле Гран Гуру

167

100%может иметь 100%высоту чего угодно. Например, если у меня есть родитель , divчто это 1000pxвысокий, и ребенок , divкоторый на 100%высоте, то , что ребенок divможет теоретически быть гораздо выше , чем высота окна просмотра, или гораздо меньше , чем высота окна просмотра, несмотря на то, что divустанавливается на 100%высота .

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

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

Развернуть фрагмент

— Джош Бим
источник

У меня была боковая панель, которая была вложена в «строку» начальной загрузки, и я не смог сделать ее полным размером страницы даже после установки высоты: 100%. То, что работало для меня, было 100vh

— raghav710

28

Я знаю, что вопрос очень старый, и @Josh Beam решил самую большую разницу, но есть еще один:

Предположим, у вас есть <div>прямой дочерний элемент , <body>который вы хотите заполнить весь видовой экран, так что вы используете width: 100vw; height: 100vh;. Все это работает так же, как и width: 100%; height: 100vh;до тех пор, пока вы не добавите больше контента и не появится вертикальная полоса прокрутки. Поскольку vwучетная запись для полосы прокрутки как часть области просмотра, width: 100vw;будет немного больше, чем width: 100%;. Эта небольшая разница в итоге добавляет горизонтальную полосу прокрутки (требуется, чтобы пользователь видел эту небольшую дополнительную ширину), и, как следствие, высота также будет немного отличаться в обоих случаях.

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

Пример:

Использование width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Развернуть фрагмент

Использование width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Развернуть фрагмент

— IanC
источник

2

CSS body { overflow: hidden }приведет к тому, что полосы прокрутки не будут отображаться.

— Дэйв Ф

2

Спасибо за ваш ответ и пример кода, @IanC. Это мне очень помогло. Уточнение: я полагаю, что вы имели в виду «полосу прокрутки», когда вы написали «боковую панель».

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

В спецификации W3C для единиц vw, vh, vmin, vmax («длина в процентах области просмотра») говорится, что «предполагается, что любые полосы прокрутки не существуют».

Очевидно, что Firefox вычитает ширину полосы прокрутки из 100vw, как @ Nolonar комментирует в Разница между шириной: 100% и шириной: 100vw? наблюдает, ссылаясь на «Могу ли я использовать».

Могу ли я использовать , возможно, в связи со спецификацией (?), Говорит, что все браузеры, кроме Firefox, в настоящее время "неправильно" считают 100vw всей шириной страницы, включая вертикальную полосу прокрутки.

— Slack Undertow
источник

1

единицы vw (view-width) и vh (view-height) относятся к размеру порта просмотра, где 100vw или vh - это 100% ширины / высоты порта просмотра.

Например, если порт просмотра имеет ширину 1600px, и вы указываете что-то как 2vw, это будет эквивалентно 2% ширины порта просмотра, или 32px.

% unit всегда основан на ширине родительского элемента текущего элемента

0

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

1

Ответ IanC делает. «Поскольку vw учитывает полосу прокрутки как часть области просмотра, ширина: 100vw; будет немного больше, чем ширина: 100% ;.»

— j08691