CSS min-height / max-height

CSS Höhe min height max height

Der CSS-Stil min-height bestimmt die minimale Höhe eines HTML-Elements. CSS min-height stellt z.B. sicher, dass auch leere Blöcke 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 zu CSS height – den wachsenden Inhalten an.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

  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.
height: 75px;
Solange der Inhalt kürzer bleibt, passiert nichts.
min-height: 75px;
Solange der Inhalt kürzer bleibt, passiert nichts.
Ohne height und min-height wächst die die Box mit dem Inhalt.
  1. Ein Block mit height läuft über, wenn der Inhalt die Höhe des Blocks überschreitet.
  2. Ein Block mit min-height wächst mit, wenn der Inhalt überläuft.
height: 75px;
Wenn der Inhalt länger als der HTML-Block wird, fließt die Box über. Das sieht man am besten am farbigen Hintergrund.
min-height: 75px;
Wenn der Inhalt länger als die Box wird, wächst die Box mit. Das sieht man am besten am farbigen Hintergrund.
Ohne height und min-height: Die Box wächst mit dem Inhalt und nimmt immer genau den Platz ein, den der Inhalt braucht.
<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

height: 80px;
Solange der Inhalt kürzer bleibt, passiert nichts.
max-height: 80px;
Die Box wächst mit dem Inhalt.
min-height: 80px;
max-height: 110px;
Solange der Inhalt kürzer bleibt, passiert nicht.
height: 80px;
Wenn der Inhalt der Box überläuft, wächst die Box nicht mit, sondern der Inhalt fließt über. Bei überlangem Inhalt verhalten sich height und max-height gleich.
max-height: 80px;
Wenn der Inhalt der Box überläuft, wächst die Box nicht mit, sondern der Inhalt fließt über. Bei überlangem Inhalt verhalten sich height und max-height gleich.
min-height: 80px;
max-height: 110px;
Wenn der Inhalt der Box überläuft, wächst die Box bis auf max-height mit, dann fließt der Inhalt auch hier über.

Neue CSS-Eigenschaften: clamp ()

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 Werte 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 clip

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus laoreet nisl non erat. Sed auctor eros a ipsum.

max-height beispiel

Vestibulum porta dui id sem. Nunc nisl risus, volutpat ac, iaculis vitae, pulvinar ut, felis. Fusce tristique orci in tellus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus laoreet nisl non erat. Sed auctor eros a ipsum.

overflow, clip beispiel

Vestibulum porta dui id sem. Nunc nisl risus, volutpat ac, iaculis vitae, pulvinar ut, felis. Fusce tristique orci in tellus.

Am Rande: Ein 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.