Egenskapen min-height

Egenskapen min-height sätter elementets minimihöjd. Värdet på egenskapen kan vara vilken enhet för storlekar som helst eller nyckelordet none, vilket betyder frånvaro av värde.

Vanligtvis sätts den för ett element med flytande bredd (höjden är satt i procent eller inte satt alls, och elementets höjd anpassas av dess innehåll).

Om en minimihöjd är satt - kan elementet inte bliva mindre än denna höjd. Om texten är mindre än vad som behövs för min-height, kommer elementet att ha höjden min-height.

Om texten är mer - kommer elementets höjd att beräknas beroende på mängden text.

Syntax

selektor {
	min-height: värde;
}

Exempel

I detta exempel är höjden inte satt alls och kommer att beräknas av webbläsaren självständigt beroende på mängden text. Emellertid, eftersom egenskapen min-height är satt, kommer höjden inte att minska under detta värde, även om det inte finns någon text i den alls:

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

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

Exempel

Låt oss lägga till mer text till elementet - så att blocket får översvämning i höjd. I detta fall kommer vårt block helt enkelt att öka sin höjd:

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

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

Exempel

För jämförelse, låt oss se vad som händer med blocket om vi tar bort minimihöjden, och istället sätter egenskapen height:

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

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

Se även

egenskapen max-height,
som sätter elementets maximihöjd
egenskapen max-width,
som sätter elementets maximibredd
egenskapen min-width,
som sätter elementets minimibredd