Svojstvo min-height

Svojstvo min-height postavlja minimalnu visinu elementa. Vrednost svojstva su bilo koje jedinice za veličine ili ključna reč none, što znači odsustvo vrednosti.

Obično se zadaje za element sa promenjivom širinom (visina je data u procentima ili uopšte nije data, a element se po visini proširuje svojim sadržajem).

Ako je zadata minimalna visina - manje od te visine element ne može da postane. Ako ima manje teksta nego što je potrebno za min-height, element će imati visinu min-height.

Ako je teksta više - visina elementa će se izračunati zavisno od količine teksta.

Sintaksa

selektor {
	min-height: vrednost;
}

Primer

U ovom primeru visina uopšte nije postavljena i birazer će je samostalno izračunati zavisno od količine teksta. Međutim, pošto je postavljeno svojstvo min-height, visina manja od te vrednosti se neće smanjiti, čak i ako teksta u njemu uopšte nema:

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

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

Primer

Dodajmo elementu više teksta - tako da dođe do prekoračenja bloka po visini. U ovom slučaju naš blok će prosto povećati svoju visinu:

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

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

Primer

Za poređenje, pogledajmo šta će biti sa blokom ako mu uklonimo minimalnu visinu, a umesto nje postavimo svojstvo height:

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

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

Vidite takođe

svojstvo max-height,
koje zadaje maksimalnu visinu elementa
svojstvo max-width,
koje zadaje maksimalnu širinu elementa
svojstvo min-width,
koje zadaje minimalnu širinu elementa