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

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

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

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

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

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

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

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

Glejte tudi

lastnost max-height,
ki določa največjo višino elementa
lastnost max-width,
ki določa največjo širino elementa
lastnost min-width,
ki določa minimalno širino elementa