Egenskaben min-height

Egenskaben min-height angiver minimumshøjden for et element. Værdien for egenskaben er enhver enhed for størrelser eller nøgleordet none, hvilket betyder fravær af værdi.

Normalt angives det for et element med flydende bredde (højden er angivet i procenter eller slet ikke angivet, og elementets højde tilpasses af dets indhold).

Hvis der er angivet en minimumshøjde - kan elementet ikke blive lavere end denne højde. Hvis der er mindre tekst end nødvendigt for min-height, vil elementet have højden min-height.

Hvis der derimod er mere tekst - vil elementets højde blive beregnet afhængigt af mængden af tekst.

Syntaks

selektor {
	min-height: værdi;
}

Eksempel

I dette eksempel er højden slet ikke angivet og vil blive beregnet af browseren automatisk afhængigt af mængden af tekst. Men, da egenskaben min-height er angivet, vil højden ikke blive mindre end denne værdi, selvom der slet ikke er tekst i den:

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

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

Eksempel

Lad os tilføje elementet mere tekst - så der opstår overløb af blokken i højden. I dette tilfælde vil vores blok blot øge sin højde:

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

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

Eksempel

Til sammenligning, lad os se, hvad der vil ske med blokken, hvis vi fjerner minimumshøjden og i stedet angiver egenskaben height:

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

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

Se også

egenskaben max-height,
som angiver maksimal højde af et element
egenskaben max-width,
som angiver maksimal bredde af et element
egenskaben min-width,
som angiver minimum bredde af et element