CSS-Eigenschaft min-height

Die Eigenschaft min-height definiert die minimale Höhe eines Elements. Diese Eigenschaft verhindert, dass der Wert der Eigenschaft height kleiner wird als der für die Eigenschaft min-height angegebene Wert.

Die Eigenschaft min-height überschreibt die Eigenschaften height und max-height.

Die Eigenschaft nimmt eine CSS-Länge (px, pt, em usw.) oder einen Prozentsatz.

Negative Werte werden nicht akzeptiert.
Anfangswert none
Gilt für Alle Elemente, aber nicht ersetzte Inline-Elemente, Tabellenspalten und Spaltengruppen.
Geerbt Nein
Animierbar Ja, die Höhe ist animierbar.
Version CSS2
DOM Syntax object.style.minHeight = "100px";

Syntax

min-height: length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      min-height: 50px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft min-height</h2>
    <div>Die minimale Höhe des Textbereichs ist mit 50px definiert.</div>
  </body>
</html>

Hier wird die minimale Höhe des Elements durch "3cm" definiert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      background-color: #ccc;  
      }
      p.example {
      min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft min-height</h2>
    <h3>Min-height: none.</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <h3>Min-height: 3cm.</h3>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Werte

Wert Beschreibung
auto Definiert die minimale Höhe fest. Es ist der Standardwert dieser Eigenschaft.
length Definiert die minimale Höhe in px, pt, cm usw. Der Standardwert ist 0.
% Stellt die minimale Höhe in % des enthaltenden Elements ein.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 3.0+ 1.0+ 4.0+

Übe dein Wissen

Was ist die Funktion der CSS-Eigenschaft 'min-height'?
Finden Sie das nützlich?