Vlastnosť min-height

Vlastnosť min-height nastavuje minimálnu výšku elementu. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosti alebo kľúčové slovo none, čo znamená žiadnu hodnotu.

Zvyčajne sa nastavuje pre element s plávajúcou šírkou (výška je daná v percentách alebo nie je daná vôbec, a element sa vo výške rozširuje svojím obsahom).

Ak je zadaná minimálna výška - tak menej ako táto výška sa element už nemôže stať. Ak je textu menej, ako je potrebné pre min-height, element bude mať výšku min-height.

Ak je textu viac - výška elementu sa vypočíta v závislosti od množstva textu.

Syntax

selektor {
	min-height: hodnota;
}

Príklad

V tomto príklade výška nie je nastavená vôbec a bude vypočítaná prehliadačom samostatne v závislosti od množstva textu. Avšak, keďže je nastavená vlastnosť min-height, tak výška menšia ako táto hodnota sa nezmenší, ani keby text v ňom nebol vôbec:

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

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

Príklad

Pridajme elementu viac textu - tak, aby došlo k pretečeniu bloku vo výške. V tomto prípade náš blok jednoducho zväčší svoju výšku:

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

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

Príklad

Pre porovnanie sa pozrime, čo bude s blokom, ak mu odoberieme minimálnu výšku, a namiesto nej nastavíme vlastnosť height:

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

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

Pozrite tiež

vlastnosť max-height,
ktorá nastavuje maximálnu výšku elementu
vlastnosť max-width,
ktorá nastavuje maximálnu šírku elementu
vlastnosť min-width,
ktorá nastavuje minimálnu šírku elementu