Stil mit {stil}

Okt 08

CSS-Eigenschaft min-height / max-height
Minimale bzw. maximale Höhe von HTML-Elementen

Die CSS-Eigenschaft min-height bestimmt die minimale Höhe eines HTML-Elements. Die CSS-Eigenschaft min-height stellt z.B. sicher, dass auch leere Boxen eine minimale Höhe im Layout aufweisen, aber bei großen Inhalten dennoch mitwachsen. Mit dem CSS-Stil min-height passt sich die Box – im Gegensatz zur Eigenschaft height – den wachsenden Inhalten an.

Ohne die Eigenschaften height oder min-height würde sich die Box zwar ebenfalls an die Höhe der Inhalte anpassen – aber die Höhe des HTML-Elements würde dann ausschließlich durch die Inhalte bestimmt.

<div style="background: lavender; height: 120px;">Als es klingelte nachts …</div>
<div style="background: seashell; min-height: 120px;">Als es klingelte nachts …</div>
<div style="background: ivory; min-height: 120px;"> …</div>
<div style="background: beige;"> …</div>

Internet Explorer 6 (ebenso wie seine Vorgänger) unterstützt die Eigenschaft min-height noch nicht, erst die Version 7 von IE kann min-height interpretieren. Für IE 6 sind diverse min-height CSS-Hacks im Umlauf.

Zwar gibt es auch die CSS-Eigenschaft max-height, aber auch mit max-height fließen überlange Inhalte in Boxen über – es sei denn, die Höhe der umfassenden Box wird mit der Stylesheet-Eigenschaft overflow: scroll oder overflow: hidden begrenzt. Übergroße Bilder können durch die Eigenschaft clip beschnitten werden.

• height width
• line-height
• [ min-height max-height ]
• min-width max-width
• vertical-align

min-height

IE7 M1 O7 S1 CSS2 Erblich: Nein

min-height

gibt die minimale Höhe eines Elements an. min-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.

Werte

<length> | <percentage> | inherit

Wenn max-height kleiner als ein zuvor definierter Wert für min-height ist, wird max-height auf den Wert von min-height gesetzt. Wenn der Wert für min-height größer als der aktuelle Wert für height ist, wird height auf den Wert von min-height gesetzt.

<length>

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage> (Prozentsatz)

gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

Beispiel: Minimale Höhe für ein Element mit der CSS-Eigenschaft min-height angeben

Die Angabe von min-height hat dieselbe Wirkung wie die Angabe der CSS-Eigenschaft height für die Höhe eines HTML-Elements. Das HTML-Element nimmt den durch min-height angegebenen Raum ein, auch wenn die Inhalte kleiner sind.

<div style="width: 300px; min-height: 300px; background: lavender;">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
   Phasellus laoreet nisl non erat. Sed auctor eros a ipsum. Etiam dolor.  </p>
   <img src="zitrus.gif" width="150" height="115" … />
   <p>Vestibulum porta dui id sem. </p>
</div>

Beispiel: Die Höhe von Elementen begrenzen

#minh2 { background: seashell; min-height: 150px; max-height: 250px; }

Darstellung

zurück zum Seitenanfang

max-height

IE7 M1 O7 S1 CSS2 Erblich: Nein

max-height

max-height bestimmt die maximale Höhe eines Elements. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.

Werte

<length> | <percentage> | none | inherit

Wenn ein Wert für max-height angegeben wird, der kleiner als eine vorangegangene Angabe für min-height für das Element ist, wird max-height auf den gleichen Wert wie min-height gesetzt. Wenn der angegebene Wert für min-height größer als der Wert für height des gleichen Elements ist, wird die Höhe des Elementes auf min-height gesetzt.

none

gibt an, dass keine Einschränkungen bezüglich der Höhe des Elements gelten.

<length>

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage> (Prozentsatz)

gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

Die Voreinstellung ist 0.

Beispiel: Die Höhe von Elementen begrenzen

---

<div style="width: 300px; max-height: 300px; background: lavender;">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. …  </p>
   <img src="zitrus.gif" width="150" height="115" … />
   <p>Vestibulum porta dui id sem. Nunc nisl risus, … </p>
</div>

<div style="overflow: scroll; width: 300px; max-height: 300px; background: lavender;">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. …  </p>
   <img src="zitrus.gif" width="150" height="115" … />
   <p>Vestibulum porta dui id sem. Nunc nisl risus, … </p>
</div>

Beispiel: Die Höhe von Elementen begrenzen

#minh2 { min-height: 150px; max-height: 250px; }

Darstellung

zurück zum Seitenanfang