CSS властивості
ГлавнаяДовідник CSSВимірювана одиниця vh в CSS

Вимірювана одиниця vh в CSS

191

Одиниця vh відповідає 1% від висоти області перегляду браузера, таким чином, 100vh дорівнює всій висоті області перегляду. Елементи, висота яких задана в одиницях vh змінюватимуть свій розмір при зміні розмірів вікна браузера.

Приклад

<!DOCTYPE html><html><head><meta charset="utf-8"><title>vh</title> <style> html { scroll-behavior: smooth; /* Плавне прокручування */} body { margin: 0; /* Забираємо відступи */} section { height: 100vh; /* Повна висота */padding: 20px; /* Поля навколо тексту */box-sizing: border-box; /* Висота не враховує padding */} section h2 { color: #fff; /* Колір тексту */} #page1 { background: #FFDB8A; } #page2 { background: #5085B6; } #page3 { background: #85AB8F; } #page4 { background: #C898AE; }</style></head><body> <section id="page1"> <a href="#page2">Наші програми</a> <a href="#page3">Особливості</a> <a href="#page4">Контакти</a></section> <section id="page2"><h2>Наші програми</h2></section> <section id="page3"><h2>Особливості</h2></section> <section id="page4"><h2>Контакти</h2></section></body></html>

У цьому прикладі створюється кілька розділів, висота яких дорівнює висоті області перегляду. При зміні розмірів вікна браузера висота розділів масштабується відповідно.

Специфікація

Специфікація Статус
CSS Values and Units Module Level 4 Робочий проект
CSS Values and Units Module Level 3 Можлива рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
  • Proposed Recommendation (Пропонована рекомендація) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
  • Working Draft ( Робочий проект) — більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чернова версія стандарту після внесення змін редакторами проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.
  • li>

Браузери

9 12 20 20 6 19
5 19 46 6

Браузери

У таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.

    Див. також