Одиниці CSS - в чому різниця між vh / vw і%?

138

Я щойно дізнався про новий і незвичайний блок CSS. vhі відповідно vwвиміряти відсоток висоти та ширини вікна перегляду.

Я розглянув це питання із Stack Overflow, але це зробило блоки ще більш схожими.

Як працює VW і VH блок

Відповідь конкретно говорить

vw і vh - відсоток від ширини та висоти вікна відповідно: 100vw - 100% ширини, 80vw - 80% тощо.

Це здається точно таким же, як %одиниця, що є більш поширеним.

У Інструментах для розробників я спробував змінити значення з vw / vh на% та viceversa і отримав той самий результат.

Чи є різниця між ними? Якщо ні, то чому були запроваджені ці нові підрозділи CSS3?

css viewport-units

— Річард Гамільтон
джерело

7

Що vw / vh робить, це усунути залежність від будь-якого з батьків та дозволяє розмір залежно від розміру вікна перегляду.

— Наклейки

2

Відповідь читача, відповідь IanC цілком може врятувати ваш день, не забудьте перевірити.

— Skippy le Grand Gourou

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%. Те, що працювало для мене, було 100 ВГт

— raghav710

27

Я знаю, що питання дуже старе, і @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 на всю ширину сторінки, включаючи вертикальну смугу прокрутки.

— Повільний піддон
джерело

1

одиниці vw (ширина перегляду) та vh (перегляд-висота) відносяться до розміру порту перегляду, де 100vw або vh становить 100% від ширини / висоти порта перегляду.

Наприклад, якщо порт перегляду шириною 1600 пікселів, і ви вказали щось на рівні 2vw, це буде еквівалентно 2% ширини порту перегляду або 32 пікселів.

% одиниці завжди базується на ширині батьківського елемента поточного елемента

0

Є різниця, яка не обов'язково піднімалася. 100vw включає ширину смуги скрутки, тоді як 100% не включає її. Це невелика різниця, але важлива при виконанні дизайну.

1

Відповідь IanC так. "Оскільки обліковий запис vw для смуги прокрутки є частиною вікна перегляду, ширина: 100vw; буде трохи більшою, ніж ширина: 100%;"

— j08691