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

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

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

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

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

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

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

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

Результат:

Pozrite tiež