Viewport Units

Satuan yang kita bahas sejauh ini mengukur font atau elemen induk. Viewport units mengukur hal yang lebih besar: jendela browser yang menampilkan halaman. Dengan vw dan vh, sebuah section bisa mengisi satu layar penuh, teks headline bisa menskala mengikuti lebar jendela, dan panel samping bisa setinggi layar tanpa satu baris JavaScript pun. Chapter ini membahas cara kerja satuan ini, termasuk dua jebakan terkenalnya: address bar ponsel dan scrollbar horizontal.

vw dan vh: Persen dari Jendela #

Viewport adalah area jendela browser yang benar-benar menampilkan halaman — tanpa toolbar, bookmark bar, dan tab. Satuan miliknya sederhana:

Unit	Arti	100 unit-nya sama dengan
`vw`	1% lebar viewport	lebar penuh jendela
`vh`	1% tinggi viewport	tinggi penuh jendela
`vmin`	1% dari sisi terpendek	sisi terpendek viewport
`vmax`	1% dari sisi terpanjang	sisi terpanjang viewport

Jadi 50vw berarti separuh lebar jendela, dan 100vh berarti setinggi jendela. Nilainya dihitung ulang setiap kali jendela diubah ukurannya — elemen ber-unit viewport selalu mengikuti.

Pola paling terkenal adalah hero section yang mengisi satu layar penuh:

css
.hero-utama {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Deklarasi height: 100vh menyetel tinggi berdasarkan jendela, bukan konten; tiga deklarasi flex lainnya memusatkan isinya — flex dibahas tuntas pada section Flexbox.

Demo berikut menampilkan hero dengan height: 60vh di dalam area demo, plus strip kecil di bawahnya:

Coba ubah tinggi jendela browser dan lihat keduanya mengikuti viewport.

Masalah Address Bar di Ponsel #

Di ponsel, tinggi viewport bukan angka tetap. Address bar browser muncul saat halaman digulir ke atas dan menyusut saat digulir ke bawah, sehingga tinggi area yang terlihat berubah-ubah. Satuan vh dihitung dari tinggi viewport terbesar — kondisi saat address bar tersimpan. Akibatnya 100vh bisa lebih tinggi daripada area yang tampak: bagian bawah section tertutup UI browser, termasuk tombol penting yang kebetulan berada di sana.

CSS modern menyediakan tiga varian yang menyelesaikan masalah ini:

Unit	Acuan	Cocok untuk
`svh`	tinggi viewport terkecil (address bar tampil)	konten yang wajib selalu tampak utuh
`lvh`	tinggi viewport terbesar (address bar tersimpan)	visual yang boleh meluas ke belakang UI
`dvh`	tinggi viewport saat ini, mengikuti address bar	section satu layar yang harus pas setiap saat

Untuk section satu layar penuh saat ini, dvh menjadi rekomendasi utama karena tingginya selalu pas dengan apa yang dilihat pengguna. Tulis bersama cadangan vh untuk browser lama:

css
.hero-utama {
  min-height: 100vh;  /* cadangan untuk browser lama */
  min-height: 100dvh; /* diabaikan browser lama, dipakai browser modern */
}

Hati-hati dengan 100vw #

Pada platform dengan scrollbar klasik, lebar viewport yang dihitung vw mencakup area scrollbar. Artinya width: 100vw bisa lebih lebar daripada ruang konten yang tersedia, dan muncul scrollbar horizontal yang tidak kita inginkan.

Untuk elemen yang cukup mengisi lebar halaman, gunakan width: 100% — acuannya induk, yang memang tidak termasuk scrollbar. Simpan vw untuk hal yang memang harus mengikuti lebar jendela secara murni, misalnya headline besar yang ikut membesar saat jendela diperlebar:

css
.headline-promo {
  font-size: 8vw; /* 8% lebar jendela, menskala otomatis */
}

Demo berikut menampilkan headline yang menskala mengikuti lebar jendela — tanpa satu media query pun:

Kesalahan Umum #

Kesalahan	Akibatnya	Perbaikan
`100vh` untuk section penuh di ponsel	bagian bawah tertutup address bar	pakai `100dvh` dengan cadangan `100vh`
`width: 100vw` pada halaman berversi scrollbar	muncul scrollbar horizontal	pakai `width: 100%` atau biarkan `auto`
`font-size` memakai `vh`	teks mengecil di layar pendek	batasi dengan `clamp()` — dibahas pada chapter lanjutan
Menyetel konten panjang dengan `height: 100vh`	konten terpotong	gunakan `min-height`, bukan `height`

Ringkasan #

Viewport units mengukur jendela browser: vw untuk lebar, vh untuk tinggi, dengan varian svh, lvh, dan dvh yang menyelesaikan masalah address bar ponsel. Dua catatan praktisnya — dvh untuk section satu layar dan pengganti 100vw berupa width 100% — menjadikan unit ini alat yang andal untuk hero dan headline luwes. Selanjutnya kita turun ke ukuran elemen itu sendiri: cara kerja width dan height beserta perilaku default auto.