Pada video sebelumnya kita telah mempelajari mengenai cara mengatur lebar atau width dari CSS Box Model, dengan menggunakan berbagai satuan baik relatif maupun absolute.

Dalam video ini, kita akan mempelajari mengenai cara mengatur tinggi dari CSS Box Model. Setelah itu kita dapat mengatur bagaimana cara browser menampilkan konten kita apabila ternyata ukuran kotak kita tidak dapat menampung seluruh isi konten.

Kita buka kembali kode dari pelajaran sebelumnya. Sebelumnya kita telah mengatur lebar dari paragraf pertama dan kedua. Sekarang kita akan melanjutkan pelajaran untuk mengatur tinggi paragrafnya.

Sebelum kita melanjutkan, pertama kita hapus dahulu properti width pada kelas judul_utama. Setelah itu kita tambahkan warna latar belakang pada paragraf pertama dan paragraf kedua ya, agar kita bisa melihat efek dari pengaturan height secara lebih jelas. Pertama kita tambahkan warna biru muda ke paragraf pertama, dengan menggunakan properti background-color: lightblue. Kita ubah ukuran width menjadi 300px. Lalu kita tambahkan warna hijau muda ke paragraf kedua, dengan menggunakan properti background-color: lightgreen.

Kita simpan dan refresh browser. Sekarang paragraf pertama sudah berwarna biru dan paragraf kedua berwarna hijau.

Kita bisa klik kanan pada paragraf pertama dan pilih Inspect. Lalu kita arahkan kursor mouse ke atas kode HTML dari paragraf pertama. Chrome akan melaporkan bahwa ukuran kotak konten dari paragraf pertama adalah 300x72. Jadi apabila kita ingin agar ukuran tinggi kotak paragraf pertama hanya separuhnya saja, maka kita bisa menambahkan properti height, dengan nilai 72 dibagi 2 yaitu 36 pixel.

Kita simpan dan refresh browser. Sekarang kita bisa melihat bahwa tinggi dari paragraf pertama hanya separuh dari sebelumnya. Namun bagian bawahnya ada sedikit berantakan ya. Apa yang sebenarnya terjadi?

Kita inspect kembali ke paragraf pertama. Disini kita bisa melihat kotak kontennya sudah berukuran 300 dikali 36 pixel. Namun konten dari paragraf pertama tidak dapat ditampung oleh kotaknya. Dan browser tetap memaksa untuk menuliskan sisa konten paragraf pertama diluar kotak.

Kita bisa melihat pada Chrome bahwa kotak konten digambangkan dengan menggunakan warna biru, yang hanya dapat menampung 2 baris. Dan dibawahnya adalah kotak berwarna orange. Kita telah pelajari pada video sebelumnya, bahwa kotak berwarna orange ini adalah margin, yang berfungsi untuk memberikan jarak antar tag. Dan kalau kita arahkan kursor mouse kita ke paragraf kedua, kita bisa melihat bahwa kotak konten dari paragraf kedua berada langsung di bawah margin tersebut. Jadinya isi baris pertama pada paragraf kedua akan bertabrakan dengan baris keempat pada paragraf pertama. Nanti kita akan mempelajari mengenai cara mengatur konten seperti ini agar lebih rapi.

Sekarang kita coba dahulu bagaimana kalau paragraf pertama kita beri height yang lebih besar daripada yang dibutuhkan? Kita ubah nilai height menjadi 150px. Kita simpan dan refresh browser. Sekarang kotak paragraf pertama berukuran 300x150 pixel. Dan pada bagian bawah kotak dibiarkan kosong tanpa teks.

Kita lanjutkan ke paragraf kedua. Disini kita lihat bahwa nilai properti width adalah 50%. Apakah kita bisa membuat height dengan nilai 50% juga? Kita coba tambahkan properti height dengan nilai 50%. Kita simpan dan refresh browser.

Ternyata tidak ada perubahan ya. Tadinya kita berpikir bahwa ukuran kotak paragraf kedua yang awalnya 10 baris, bisa berkurang 50% menjadi 5 baris. Ternyata tidak bisa. Karena satuan relatif tersebut bukan dihitung dari tinggi tag itu sendiri, melainkan dihitung dari tinggi parentnya. Dan berhubung tinggi parentnya adalah otomatis, maka browser tidak bisa menghitungkan nilai relatifnya.

Agar height pada paragraf kedua dapat menggunakan nilai relatif, maka kita harus menambahkan height pada parent-nya dengan nilai yang absolute. Sebagai contoh, saya tambahkan height: 600px pada parentnya. Nah sekarang tinggi dari paragraf kedua sudah berubah. Kalau kita inspect, maka browser akan melaporkan bahwa tinggi dari paragraf kedua adalah 300px. Jadinya nilainya cocok ya, 50% dari 600px adalah 300px. Dan seperti yang telah kita pelajari pada video sebelumnya, apabila kita menggunakan satuan relatif terhadap parent yang menggunakan satuan absolute, maka kita akan mendapatkan satuan absolute.

Oke, sekarang kita kembali ke masalah yang tadi ya. Misalkan saya ubah tinggi paragraf kedua menjadi 100px. Dan properti height pada parent-nya saya hapus. Lalu saya refresh browser. Kita bisa melihat bahwa kotak paragraf kedua tidak cukup untuk menampung seluruh isi kontennya, namun sisa kontennya tetap ditulis di bagian bawah kotak. Akibatnya sisa konten paragraf kedua akan bertabrakan dengan konten dari tag berikutnya.

Nah, untuk mengatur hal ini kita bisa menggunakan properti overflow. Kita bisa buka google dan melakukan pencarian dengan kata kunci MDN CSS Overflow. Lalu kita buka referensi dari situs MDN. Nah, dari contoh yang diberikan oleh MDN, kita bisa melihat ada 4 buah nilai yang biasanya digunakan untuk overflow. Nilai yang default digunakan adalah visible, dimana konten yang tidak muat di dalam kotak akan tetap ditampilkan dibagian bawah kotak. Jadi kalau kita menambahkan properti overflow dengan nilai visible pada paragraf kedua, maka hasilnya akan tetap sama.

Nilai kedua yang bisa digunakan adalah hidden, dimana konten yang tidak muat akan secara otomatis dihilangkan. Kita coba nilai ini dalam kode CSS kita. Nah sekarang konten kita akan kelihatan lebih rapi ya, karena konten paragraf kedua tidak tumpah keluar kotaknya. Namun di baris terakhir dari paragraf kedua masih ada tulisan yang hanya kelihatan setengah baris ya. Ini bisa diakali dengan cara mengurangi nilai height sehingga tingginya bisa pas 5 baris konten.

Nilai ketiga yang bisa digunakan untuk properti overflow adalah scroll. Dengan menggunakan nilai ini, maka browser akan membuatkan scrollbar vertikal dan horizontal pada konten, sehingga kita bisa menggeser scrollbarnya untuk membaca konten yang dibawahnya. Kelemahan dari nilai scroll ini adalah browser akan selalu memunculkan kedua scrollbar ini, tidak peduli apakah kotak konten mencukupi ataupun tidak. Sebagai contoh, kita ubah nilai height menjadi 300px. Bisa kita lihat disini bahwa scrollbarnya tetap ada walaupun kontennya masih muat di dalam kotak.

Untuk menghilangkan scrollbar ini, kita bisa menggunakan nilai auto. Jadi browser akan secara otomatis membuat scrollbar hanya jika diperlukan saja. Contohnya sekarang kita lihat tidak ada scrollbar. Dan kalau kita ganti nilai height menjadi 100px, maka browser akan secara otomatis memunculkan scrollbar vertikal. Sedangkan scrollbar horizontal tidak dimunculkan karena tidak ada kebutuhannya.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.