Eigenschap min-height

De eigenschap min-height stelt de minimale hoogte van een element in. De waarde van de eigenschap zijn alle eenheden voor afmetingen of het sleutelwoord none, wat betekent dat er geen waarde is.

Meestal ingesteld voor een element met een variabele breedte (hoogte is ingesteld in percentages of niet ingesteld helemaal, en het element wordt in hoogte vergroot door zijn inhoud).

Als een minimale hoogte is ingesteld - dan minder dan deze hoogte kan het element niet worden. Als er minder tekst is dan nodig voor min-height, heeft het element een hoogte van min-height.

Als er meer tekst is - wordt de hoogte van het element berekend afhankelijk van de hoeveelheid tekst.

Syntaxis

selector {
	min-height: waarde;
}

Voorbeeld

In dit voorbeeld is de hoogte helemaal niet ingesteld en wordt door de browser automatisch berekend afhankelijk van de hoeveelheid tekst. Echter, omdat de eigenschap min-height is ingesteld, zal de hoogte niet kleiner worden dan deze waarde, zelfs als er helemaal geen tekst in staat:

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

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

Voorbeeld

Laten we meer tekst toevoegen aan het element - zodat de hoogte van het blok wordt overschreden. In dit geval zal ons blok simpelweg zijn hoogte vergroten:

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

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

Voorbeeld

Laten we voor de vergelijking kijken wat er gebeurt met het blok als we de minimale hoogte verwijderen, en in plaats daarvan de eigenschap height instellen:

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

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

Zie ook

eigenschap max-height,
dat de maximale hoogte van een element instelt
eigenschap max-width,
dat de maximale breedte van een element instelt
eigenschap min-width,
dat de minimale breedte van een element instelt