Pertanyaan yang sering diajukan dalam desain situs web adalah "bagaimana Anda mengatur tinggi elemen hingga 100%"?
Ini mungkin tampak seperti jawaban yang mudah. Anda cukup menggunakan CSS untuk mengatur ketinggian elemen hingga 100%, tetapi ini tidak selalu meregangkan elemen itu agar sesuai dengan seluruh jendela browser. Mari kita cari tahu mengapa ini terjadi dan apa yang dapat Anda lakukan untuk mencapai gaya visual ini.
Piksel dan Persentase
Saat Anda menentukan tinggi elemen menggunakan properti CSS dan nilai yang menggunakan piksel, elemen itu akan menempati ruang vertikal di peramban.
Misalnya, paragraf dengan tinggi: 100 piksel; akan mengambil 100 piksel ruang vertikal dalam desain Anda. Tidak masalah seberapa besar jendela browser Anda, elemen ini akan menjadi 100 piksel.
Persentase bekerja berbeda dari piksel. Menurut spesifikasi W3C, tinggi persentase dihitung dengan memperhatikan ketinggian kontainer. Jadi jika Anda memasang paragraf dengan tinggi: 50%; di dalam div dengan tinggi 100px, paragraf akan menjadi 50 piksel tinggi, yaitu 50% dari elemen induknya.
Mengapa Persentase Heights Gagal
Jika Anda mendesain halaman web, dan Anda memiliki kolom yang Anda ingin mengambil tinggi penuh dari jendela, kemiringan alami adalah untuk menambah tinggi: 100%; ke elemen itu. Lagi pula, jika Anda mengatur lebar ke lebar: 100%; elemen akan mengambil ruang horizontal penuh halaman, jadi ketinggian harus bekerja sama, kan? Sayangnya, ini bukan kasusnya sama sekali.
Untuk memahami mengapa ini terjadi, Anda harus memahami bagaimana browser menginterpretasikan tinggi dan lebar. Browser web menghitung total lebar yang tersedia sebagai fungsi dari seberapa lebar jendela browser dibuka. Jika Anda tidak menetapkan nilai lebar apa pun pada dokumen Anda, peramban akan secara otomatis mengalirkan konten untuk mengisi seluruh lebar jendela (lebar 100% adalah default).
Nilai ketinggian dihitung berbeda dari lebar. Faktanya, browser tidak mengevaluasi tinggi sama sekali kecuali konten begitu panjang sehingga keluar dari viewport (sehingga membutuhkan scroll bar) atau jika perancang web menetapkan tinggi absolut untuk elemen di halaman. Jika tidak, browser hanya membiarkan konten mengalir dalam lebar viewport hingga sampai pada akhirnya. Ketinggian sebenarnya tidak dihitung sama sekali.
Masalah terjadi ketika Anda menetapkan tinggi persentase pada elemen yang memiliki elemen induk tanpa set ketinggian - dengan kata lain, elemen induk memiliki tinggi default: otomatis; . Anda, pada dasarnya, meminta browser untuk menghitung tinggi dari nilai tidak terdefinisi. Karena itu akan sama dengan nilai nol, hasilnya adalah browser tidak melakukan apa-apa.
Jika Anda ingin menetapkan tinggi pada halaman web Anda ke persentase, Anda harus mengatur tinggi setiap elemen induk dari yang Anda inginkan ketinggian ditentukan. Dengan kata lain, jika Anda memiliki halaman seperti ini:
Konten di sini
Anda mungkin ingin div dan paragraf di dalamnya memiliki tinggi 100%, tetapi div itu sebenarnya memiliki dua elemen induk:
dan. Untuk menentukan tinggi div ke tinggi relatif, Anda harus mengatur tinggi badan dan elemen html juga.
Jadi Anda perlu menggunakan CSS untuk mengatur tinggi tidak hanya div, tetapi juga elemen body dan html. Ini bisa menjadi tantangan, karena Anda dapat dengan cepat kewalahan dengan segala sesuatu yang diatur hingga 100% tinggi, hanya untuk mencapai efek yang diinginkan ini.
Beberapa Hal yang Perlu Diperhatikan Ketika Bekerja dengan 100% Ketinggian
Sekarang setelah Anda tahu cara mengatur tinggi elemen laman Anda hingga 100%, Anda bisa menarik untuk keluar dan melakukannya ke semua laman Anda, tetapi ada beberapa hal yang harus Anda ketahui:
- Margin dan padding dapat menambahkan bilah gulir di mana Anda tidak menginginkannya. Salah satu hal paling menjengkelkan yang saya temukan dengan bekerja dengan tinggi dan lebar persentase adalah bahwa kemudian padding dan margin pada elemen-elemen yang sama dapat menambahkan scroll bar ke halaman, meskipun semua konten menampilkan tanpa membutuhkan scroll bar. Ini karena tinggi atau lebar elemen adalah hal pertama yang dihitung. Kemudian margin dan paddings ditambahkan. Jadi jika Anda memiliki elemen dengan ketinggian 100% dan margin atas dan bawah masing-masing 10 piksel, akan ada bilah gulir untuk 20 piksel tambahan. Ingat, model kotak CSS menambahkan margin, batas, dan padding ke ukuran elemen, jadi 100% dengan salah satu dari nilai-nilai model kotak lainnya sebenarnya akan lebih dari 100%.
- Jika konten Anda membutuhkan lebih dari tinggi yang ditentukan, konten akan menimpa apa pun setelahnya. Dengan kata lain, jika Anda memiliki desain dengan kolom yang tingginya 80%, dan konten yang ada di dalamnya akan mencapai 100% tinggi, tambahan 20% itu akan berlanjut di bawah kolom dan merusak desain visual halaman Anda. Jika ada konten di bawah kolom itu, teks hanya akan menulis di atasnya. Saya sering melihat ini terjadi ketika seorang perancang web mencoba untuk memaksa ketinggian halaman dan membuatnya bekerja dengan sempurna untuk diluncurkan, tetapi ketika konten di halaman tersebut berubah di masa depan, ketinggian absolut mereka benar-benar mematahkan aliran halaman. Ini benar dua kali lipat ketika Anda sedang membangun situs web responsif yang lebar dan tingginya harus berubah dengan ukuran viewport.
Untuk memperbaikinya, Anda dapat mengatur ketinggian elemen juga. Jika Anda mengesetnya ke otomatis, bilah gulir akan muncul jika diperlukan tetapi menghilang saat tidak digunakan. Yang memperbaiki istirahat visual, tetapi menambahkan scrollbar di mana Anda mungkin tidak menginginkannya.
Menggunakan Unit Viewport
Cara lain yang bisa Anda lakukan untuk mengatasi tantangan ini adalah bereksperimen dengan CSS Viewport Units. Dengan menggunakan unit pengukuran tinggi viewport , Anda dapat mengukur elemen untuk mengambil ketinggian area pandang yang ditentukan, dan itu akan berubah ketika viewport berubah! Ini adalah cara yang bagus untuk mendapatkan visual ketinggian 100% Anda di laman tetapi tetap membuatnya fleksibel untuk berbagai perangkat dan ukuran layar.