Proprietatea min-height

Proprietatea min-height stabilește înălțimea minimă a unui element. Valoarea proprietății poate fi orice unitate de măsură pentru dimensiuni sau cuvântul cheie none, care indică absența unei valori.

De obicei, este setată pentru un element cu lățime variabilă (înălțimea este stabilită în procente sau nu este stabilită deloc, iar elementul își modifică înălțimea în funcție de conținut).

Dacă este stabilită o înălțime minimă - elementul nu va putea deveni mai mic decât această înălțime. Dacă textul este mai puțin decât este necesar pentru min-height, elementul va avea înălțimea min-height.

Dacă textul este mai mult - înălțimea elementului va fi calculată în funcție de cantitatea de text.

Sintaxă

selector {
	min-height: valoare;
}

Exemplu

În acest exemplu, înălțimea nu este stabilită deloc și va fi calculată de browser în mod independent în funcție de cantitatea de text. Cu toate acestea, deoarece este setată proprietatea min-height, înălțimea nu va scădea sub această valoare, chiar dacă nu va fi text în el:

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

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

Exemplu

Să adăugăm elementului mai mult text - astfel încât să se producă depășirea blocului în înălțime. În acest caz, blocul nostru pur și simplu își va mări înălțimea:

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

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

Exemplu

Pentru comparație, să vedem ce se va întâmpla cu blocul, dacă îi eliminăm înălțimea minimă, și în locul ei setăm proprietatea height:

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

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

Vezi și

proprietatea max-height,
care stabilește înălțimea maximă a elementului
proprietatea max-width,
care stabilește lățimea maximă a elementului
proprietatea min-width,
care stabilește lățimea minimă a elementului