Properti min-height

Properti min-height mengatur tinggi minimum elemen. Nilai properti ini dapat berupa satuan ukuran apa pun atau kata kunci none, yang berarti tidak ada nilai.

Biasanya diterapkan pada elemen dengan lebar mengambang (tinggi ditentukan dalam persentase atau tidak ditentukan sama sekali, dan tinggi elemen menyesuaikan secara otomatis berdasarkan kontennya).

Jika tinggi minimum ditetapkan - elemen tidak akan bisa menjadi lebih kecil dari tinggi ini. Jika teksnya lebih sedikit daripada yang dibutuhkan untuk min-height, elemen akan memiliki tinggi min-height.

Jika teksnya lebih banyak - tinggi elemen akan dihitung tergantung pada jumlah teks.

Sintaks

selektor {
	min-height: nilai;
}

Contoh

Dalam contoh ini, tinggi tidak ditetapkan sama sekali dan akan dihitung secara otomatis oleh browser tergantung pada jumlah teks. Namun, karena properti min-height ditetapkan, maka tinggi elemen tidak akan berkurang di bawah nilai ini, bahkan jika tidak ada teks di dalamnya:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
}

Contoh

Mari tambahkan lebih banyak teks ke elemen - sehingga terjadi overflow pada tinggi blok. Dalam kasus ini, blok kita hanya akan menambah tingginya:

<div id="elem">
	some long text
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Contoh

Sebagai perbandingan, mari kita lihat apa yang terjadi pada blok jika tinggi minimum dihapus, dan sebagai gantinya diberikan properti height:

<div id="elem">
	some long text
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}

Lihat juga

properti max-height,
yang mengatur tinggi maksimum elemen
properti max-width,
yang mengatur lebar maksimum elemen
properti min-width,
yang mengatur lebar minimum elemen