Vlastnost min-height

Vlastnost min-height nastavuje minimální výšku elementu. Hodnotou vlastnosti jsou libovolné jednotky pro rozměry nebo klíčové slovo none, což znamená absenci hodnoty.

Obvykle se nastavuje pro element s plovoucí šířkou (výška je nastavena v procentech nebo není nastavena vůbec, a element se ve výšce roztahuje svým obsahem).

Pokud je nastavena minimální výška - pak méně než této výšky se element nemůže zmenšit. Pokud je textu méně, než je potřeba pro min-height, element bude mít výšku min-height.

Pokud je textu více - výška elementu se vypočte v závislosti na množství textu.

Syntaxe

selektor {
	min-height: hodnota;
}

Příklad

V tomto příkladu není výška nastavena vůbec a bude prohlížečem vypočtena samostatně v závislosti na množství textu. Avšak, protože je nastavena vlastnost min-height, výška menší než této hodnoty se nezmenší, dokonce i když v něm text vůbec nebude:

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

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

Příklad

Přidejme elementu více textu - tak, aby došlo k přetečení bloku ve výšce. V tomto případě náš blok jednoduše zvětší svou výšku:

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

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

Příklad

Pro srovnání se podívejme, co se stane s blokem, pokud mu odstraníme minimální výšku, a místo ní nastavíme vlastnost height:

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

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

Viz také

vlastnost max-height,
která nastavuje maximální výšku elementu
vlastnost max-width,
která nastavuje maximální šířku elementu
vlastnost min-width,
která nastavuje minimální šířku elementu