CSS min-height / max-height – minimale und maximale Höhe

max-height und overflow

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

CSS min-height – minimale Höhe eines Blocks

1. Wenn der Inhalt kürzer als die Höhe des Blocks bleibt, verhalten sich Blöcke mit min-height und height gleich.
2. Ohne height oder min-height passt sich die Box immer an die Höhe des Inhalts an. Die Höhe des HTML-Blocks wird ausschließlich durch den Inhalt bestimmt.

3. Ein Block mit height läuft über, wenn der Inhalt die Höhe des Blocks überschreitet.
4. Ein Block mit min-height wächst mit, wenn der Inhalt überläuft.

<div style="background:blue; height:75px;">
   height: 75px; …
</div>
<div style="background: yellow; min-height: 75px;">
   min-height: 75px; …
</div>
<div style="background: green;">
  …
</div>

min-height

Erblich

Nein

gibt die minimale Höhe eines Elements an.

Werte

<length> | <percentage> | inherit

Wenn sowohl min-height als auch max-height für einen HTML-Block angegeben wird und max-height kleiner als min-height ist, wird max-height auf den Wert von min-height gesetzt.

Wenn sowohl min-height als auch height für einen HTML-Block angegeben wird und min-height größer als 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.

CSS max-height – maximale Höhe eines Blocks

Neue CSS-Eigenschaften: clamp () – Breite / Höhe zwischen Min und Max

CSS clamp() ist eine neue Technik, die zwischen einem minimalen und einem maximalen Wert wählt, z.B. um den Text linear an die Breite des Platzangebots im Viewport oder im Layout anzupassen. clamp() beschränkt einen Wert auf dem Bereich zwischen einem Minimum und einem Maximum.

max-height Werte

Erblich: Nein

max-height

max-height bestimmt die maximale Höhe eines Elements.

Werte

<length> | <percentage> | none | inherit

Wenn sowohl max-height als auch min-height angegeben wird und max-height kleiner als min-height ist, wird max-height auf den gleichen Wert wie min-height gesetzt.

Wenn min-height größer als height ist, wird die Höhe des HTML-Blocks 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.

max-height mit overflow und scroll

Am Rande: Das zweite Beispiel läßt sich scrollen und margin-bottom wird dabei freigeschlagen (zartgelber Hintergrund).

<div style="max-height: 300px; 
            background: blue;">
   <p>Lorem ipsum …  </p>
   <img src="bild.gif" width="150" height="115" … />
</div>

<div style="overflow: scroll; 
            max-height: 300px; background: blue;">
   <p>Lorem ipsum …  </p>
   <img src="bild.gif" width="150" height="115" … />
</div>

min-height max-height animieren

min-height und max-height haben numerische Werte, also lassen sie sich mit animieren. max-height wird z.B. für die Animation eines Menüs benutzt.

nav.topmenu { 
   height: auto;
   max-height:0;
   overflow: hidden;
   background: white;
   transition: all 0.5s; 
}

#hamburg:checked nav.topmenu { 
   max-height: 600px;
   background: #17B5EB;
}

Meist läßt sich nicht vorhersagen, wie hoch ein Element ist. Das Menü wird im Anfangsstadium mit max-height : 0 und overflow : hidden verborgen, bei einem Klick oder Touch kann max-height auf einen hohen Schätzwert gesetzt werden, bei dem die Höhe auf jeden Fall reicht. Auch wenn max-height 1000px hoch wäre: Der Block wird mit height : auto nur so hoch wie sein Inhalt.

Responsives Top Menü ohne Javascript animiert mit CSS height und max-height.