Eigenschaft min-height

Die Eigenschaft min-height legt die minimale Höhe eines Elements fest. Als Werte der Eigenschaft dienen beliebige Einheiten für Größen oder das Schlüsselwort none, was das Fehlen eines Wertes bedeutet.

Wird normalerweise für ein Element mit variabler Höhe verwendet (die Höhe ist in Prozent angegeben oder überhaupt nicht festgelegt, und die Höhe des Elements wird durch seinen Inhalt bestimmt).

Wenn eine minimale Höhe festgelegt ist - kann das Element nicht kleiner als diese Höhe werden. Wenn der Text weniger Platz benötigt als für min-height, hat das Element die Höhe min-height.

Wenn der Text mehr Platz benötigt - wird die Höhe des Elements in Abhängigkeit von der Textmenge berechnet.

Syntax

Selektor {
	min-height: Wert;
}

Beispiel

In diesem Beispiel ist die Höhe überhaupt nicht festgelegt und wird vom Browser automatisch in Abhängigkeit von der Textmenge berechnet. Da jedoch die Eigenschaft min-height festgelegt ist, wird die Höhe nicht kleiner als dieser Wert, auch wenn sich überhaupt kein Text darin befindet:

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

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

Beispiel

Fügen wir dem Element mehr Text hinzu - so dass der Block in der Höhe überläuft. In diesem Fall wird unser Block einfach seine Höhe erhöhen:

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

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

Beispiel

Zum Vergleich sehen wir uns an, was mit dem Block passiert, wenn wir die minimale Höhe entfernen und stattdessen die Eigenschaft height festlegen:

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

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

Siehe auch

die Eigenschaft max-height,
die die maximale Höhe eines Elements festlegt
die Eigenschaft max-width,
die die maximale Breite eines Elements festlegt
die Eigenschaft min-width,
die die minimale Breite eines Elements festlegt