CSS min-height-Eigenschaft

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

Die min-height-Eigenschaft interagiert gemäß den CSS-Größenregeln mit den Eigenschaften height und max-height.

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

INFO

Negative Werte werden nicht akzeptiert.

Anfangswert	0
Gilt für	Alle Elemente, außer nicht ersetzte Inline-Elemente, Spaltengruppen und Tabellenspalten.
Vererbbar	Nein.
Animierbar	Ja. Höhe ist animierbar.
Version	CSS2
DOM-Syntax	object.style.minHeight = "100px";

Syntax

Syntax der CSS min-height-Eigenschaft

css

min-height: auto | length | percentage | calc() | initial | inherit;

Beispiel für die min-height-Eigenschaft:

Beispiel für die CSS min-height-Eigenschaft mit px-Wert

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        min-height: 50px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <div>The text area's minimum height is defined as 50px.</div>
  </body>
</html>

Try it Yourself »

Ergebnis

SS min-height-Eigenschaft

Beispiel für die min-height-Eigenschaft mit dem Wert „3cm":

Beispiel für die CSS min-height-Eigenschaft mit cm-Wert

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #ccc;
      }
      p.example {
        min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <h3>Min-height: auto.</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>

Try it Yourself »

Werte

| Wert | Beschreibung | Ausführen | |---|---| | auto | Der Browser berechnet und wählt eine min-height für das angegebene Element. | Ausführen » | | length | Definiert die Mindesthöhe in px, pt, cm usw. Standardwert ist 0. | Ausführen » | | % | Legt die Mindesthöhe in % des Elternelements fest. | | | calc() | Berechnet die Mindesthöhe mithilfe eines Ausdrucks. | Ausführen » | | fit-content() | Legt die Mindesthöhe basierend auf der Inhaltsgröße fest. | Ausführen » | | max-content | Legt die Mindesthöhe auf die intrinsische maximale Breite/Höhe des Inhalts fest. | Ausführen » | | min-content | Legt die Mindesthöhe auf die intrinsische minimale Breite/Höhe des Inhalts fest. | Ausführen » | | initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » | | inherit | Erbt die Eigenschaft von ihrem Elternelement. | |

Praxis

Was bewirkt die 'min-height'-Eigenschaft in CSS?

Sie legt die Mindesthöhe eines Elements fest.Sie legt die Maximalhöhe eines Elements fest.Es gibt keine solche 'min-height'-Eigenschaft in CSS.Sie verhindert, dass eine CSS-Box unter eine bestimmte Größe schrumpft.Sie definiert die exakte Höhe eines Elements.

CSS min-height-Eigenschaft ​

Syntax ​

Beispiel für die min-height-Eigenschaft: ​

Ergebnis ​

Beispiel für die min-height-Eigenschaft mit dem Wert „3cm": ​

Werte ​