Lastnost min-height

Lastnost min-height določa minimalno višino elementa. Vrednost lastnosti so lahko poljubne enote za velikosti ali ključna beseda none, kar pomeni odsotnost vrednosti.

Običajno se nastavi za element s plavajočo širino (višina je določena v odstotkih ali sploh ni določena, element pa se po višini razširi glede na svojo vsebino).

Če je določena minimalna višina - element ne more postati nižji od te višine. Če je besedila manj, kot je potrebno za min-height, bo imel element višino min-height.

Če je besedila več - se bo višina elementa izračunala glede na količino besedila.

Sintaksa

cssselektor {
  min-height: vrednost;
}

Primer

V tem primeru višina sploh ni nastavljena in jo bo brskalnik izračunal samodejno glede na količino besedila. Vendar, ker je nastavljena lastnost min-height, se višina ne bo zmanjšala pod to vrednost, tudi če besedila v njem sploh ne bo:

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

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

Результат:

Primer

Dodajmo elementu več besedila - tako, da pride do prelivanja bloka po višini. V tem primeru se bo naš blok preprosto povečal po višini:

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

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

Результат:

Primer

Za primerjavo poglejmo, kaj se zgodi z blokom, če mu odstranimo minimalno višino, namesto nje pa nastavimo lastnost 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;
}

Результат:

Glejte tudi