Mengatur Tinggi Elemen dengan 100vh di Bootstrap
Bootstrap memberikan fleksibilitas dalam mengatur tata letak halaman web, termasuk tinggi elemen. Salah satu cara untuk mengatur tinggi elemen agar memenuhi seluruh tinggi layar adalah dengan menggunakan 100vh pada properti height.
vh adalah singkatan dari viewport height, yang berarti persentase dari tinggi jendela browser. 100vh berarti tinggi elemen akan sama dengan 100% dari tinggi layar.
Berikut beberapa cara mengatur tinggi elemen dengan 100vh di Bootstrap:
1. Menggunakan Class vh-100
Bootstrap menyediakan class vh-100 yang dapat digunakan untuk mengatur tinggi elemen menjadi 100% tinggi viewport.
2. Menambahkan CSS Secara Langsung
Anda juga dapat mengatur tinggi elemen dengan 100vh secara langsung dengan menambahkan CSS ke elemen tersebut.
3. Mengatur Tinggi pada Container
Jika Anda ingin mengatur tinggi elemen dalam container, Anda dapat menggunakan class h-100 pada container dan vh-100 pada elemen di dalam container.
Pertimbangan
- Browser Compatibility: Pastikan browser yang Anda targetkan mendukung
vhunit. - Scrollbars: Jika elemen memiliki konten yang lebih tinggi dari tinggi layar, scrollbars akan muncul.
- Padding dan Margin: Padding dan margin pada elemen dapat mempengaruhi tinggi elemen.
- Responsiveness:
100vhakan mengikuti tinggi layar perangkat.
Tips
- Gunakan class
d-flex: Mengatur elemen menjadid-flexdapat membantu menjaga konten di dalam elemen tetap di tengah, bahkan jika tinggi elemen lebih tinggi dari konten. - Hindari padding: Hindari penggunaan padding pada elemen yang menggunakan
100vh, karena padding dapat menambah tinggi elemen dan scrollbars dapat muncul.
Kesimpulan
Dengan menggunakan 100vh, Anda dapat dengan mudah mengatur tinggi elemen agar memenuhi seluruh tinggi layar. Ini sangat berguna untuk menciptakan tampilan yang lebih immersive dan modern. Pastikan untuk mempertimbangkan faktor-faktor yang telah dibahas di atas untuk memastikan implementasi yang optimal.
