Min-Height dan Max-Height

Pada chapter Width dan Height kita mengunci tinggi elemen dengan sebuah angka, tetapi konten tidak selalu sepanjang prediksi kita: teks bisa diperpanjang saat penyuntingan, pengguna bisa memperbesar ukuran huruf, dan terjemahan bahasa lain sering lebih panjang. min-height dan max-height menyelesaikan masalah ini dengan pendekatan yang berbeda: keduanya memberi batas bawah dan batas atas, lalu menyerahkan tinggi akhir kepada browser. Pada chapter ini kita mempraktikkan keduanya untuk section yang konsisten dan panel yang dapat dilipat.

Tinggi yang Dikunci vs Tinggi yang Terbatas #

Tinggi bawaan elemen block adalah auto: kotak tumbuh mengikuti isinya. Ketika kita menggantinya dengan angka, tiga property memberi hasil yang berbeda:

Dua kartu dengan teks berbeda panjang, satu memakai min-height dan satu memakai height:

Perbedaannya hanya satu kata property, tetapi dampaknya menentukan apakah konten selamat saat teks berubah.

Perbedaan paling penting terlihat saat teks membesar. Jika pengguna mengaktifkan pengaturan ukuran font yang lebih besar pada browser atau memakai zoom teks, teks di dalam kotak bertambah tinggi. Kotak dengan height tetap berukuran sama sehingga teksnya terpotong; kotak dengan min-height justru ikut membesar karena di atas batas minimumnya tinggi tetap ditentukan konten. Inilah alasan aksesibilitas kuat untuk memilih min-height daripada height pada area yang berisi teks.

Ketiga property sebenarnya boleh dipasang bersamaan, dan browser menerapkannya sebagai satu rentang: min-height menjadi lantai, max-height menjadi plafon, dan height bekerja di antara keduanya. Bila angkanya bertentangan — misalnya lantai lebih tinggi daripada plafon — nilai min-height yang menang dan plafon diabaikan. Mengetahui urutan kekuatan ini mencegah deklarasi yang diam-diam saling meniadakan.

min-height untuk Section yang Konsisten #

Kasus klasik min-height adalah hero: area pembuka halaman yang ingin terlihat megah meskipun teksnya hanya satu kalimat.

.hero {
  min-height: 480px;
  padding: 64px 24px;
}

Angka 480px di sini adalah lantai, bukan tembok.

Pola yang sama merapikan barisan kartu. Kartu fitur sering berisi jumlah baris yang berbeda-beda, sehingga tanpa batas tingginya tidak seragam:

.kartu-langganan {
  min-height: 320px;
}

max-height untuk Panel yang Dilipat #

max-height bekerja di sisi sebaliknya: kotak boleh pendek mengikuti konten, tetapi tidak boleh melewati plafon. Kombinasi max-height dan overflow menghasilkan pola panel yang dapat dilipat seperti accordion:

.panel-isi {
  max-height: 0;
  overflow: hidden;
}

.panel-terbuka .panel-isi {
  max-height: 320px;
}

Demo berikut memperlihatkan dua keadaan markup yang sama — satu tanpa class panel-terbuka, satu dengan:

Property overflow: hidden bertugas memotong sisa konten di luar plafon, dan property overflow akan kita bahas tuntas pada chapter tersendiri.

Satu catatan praktis: angka 320px harus dipilih lebih tinggi daripada konten tertinggi yang mungkin muncul. Jika konten lebih tinggi dari plafon, bagian akhirnya tidak terlihat. Pola lipat ini juga sering dipadukan dengan transition agar panel membuka dan menutup secara berangsur — property transition dibahas pada section Transitions dan Animations. Untuk sekarang cukup dipahami bahwa pergantian nilai max-height inilah pemicu terbuka-tutupnya panel.

Kesalahan Umum #

Ringkasan #

min-height memberi lantai dan max-height memberi plafon, sementara tinggi di antara keduanya tetap mengikuti konten. Gunakan min-height untuk section yang ingin tampak konsisten seperti hero, dan pasangan max-height dengan overflow untuk panel yang dapat dilipat. Di balik semua pola ini ada nilai bawaan yang selama ini bekerja diam-diam: auto. Chapter berikutnya membedah nilai tersebut secara khusus, karena pemahaman tentang auto menjelaskan banyak perilaku ukuran yang sebelumnya terasa sulit diprediksi.