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

cssselektor {
  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:

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

css#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:

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

css#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:

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

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

Результат:

Viz také