CSS min-height Eigenschaft
Mit der CSS-Eigenschaft min-height legen Sie die Mindesthöhe des Inhaltsbereichs eines Elements fest. Mehr zu Werten und Beispielen.
Die min-height-Eigenschaft legt die Mindesthöhe eines Elements fest. Das Element kann größer als dieser Wert werden, wenn sein Inhalt mehr Platz benötigt, aber es kann nie kleiner als dieser Wert werden. Im Wesentlichen setzt min-height eine Untergrenze für die Höhe der Box.
Das ist nützlich, wenn man unabhängig vom Inhalt eine garantierte Mindesthöhe sicherstellen möchte — zum Beispiel bei einem Hero-Banner, einer Karte oder einem Footer, der immer substanziell wirken soll, egal wie viel Text er enthält.
Wie min-height mit height und max-height interagiert
Die drei Höheneigenschaften werden vom Browser gemeinsam nach den Sizing-Regeln aufgelöst:
- Wenn die berechnete
heightkleiner alsmin-heightist, wird das Element aufmin-heighthochgesetzt (der Minimalwert gewinnt). - Wenn die berechnete
heightgrößer alsmin-heightist, hatmin-heightkeine Wirkung. min-heighthat stets Vorrang vormax-height: Wenn die beiden in Konflikt stehen, ist das Element mindestensmin-heighthoch, auch wenn dasmax-heightüberschreitet.
Die effektive Höhe wird also in den Bereich min-height ... max-height eingeklemmt, und Inhalt, der diesen Bereich überläuft, wird durch die overflow-Eigenschaft gesteuert.
Die Eigenschaft akzeptiert eine CSS-Länge (px, em, rem, vh usw.) oder einen Prozentwert.
Ein Prozentwert bei min-height wird aus der Höhe des Elternelements berechnet. Hat das Elternelement keine explizit festgelegte Höhe, wird der Prozentwert als 0 behandelt (d. h. er hat keine Wirkung) — eine häufige Quelle von Verwirrung. Negative Werte werden nie akzeptiert.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente, außer nicht-ersetzte Inline-Elemente, Spaltengruppen und Tabellenspalten. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Höhe ist animierbar. |
| Version | CSS2 |
| DOM-Syntax | object.style.minHeight = "100px"; |
Syntax
Syntax der CSS min-height Eigenschaft
min-height: auto | length | percentage | calc() | initial | inherit;Beispiel der min-height-Eigenschaft:
Beispiel der CSS min-height Eigenschaft mit px-Wert
<!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>Ergebnis
Beispiel der min-height-Eigenschaft mit dem Wert "3cm":
Beispiel der CSS min-height Eigenschaft mit cm-Wert
<!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>Inhaltsbasierte Schlüsselwörter verwenden
Neben Längen und Prozentwerten akzeptiert min-height auch Schlüsselwörter für die intrinsische Größenbestimmung, die den Minimalwert am Inhalt ausrichten:
min-content— die kleinste Höhe, die der Inhalt einnehmen kann, ohne zu überlaufen (ungefähr die Höhe bei maximaler Umbruchverdichtung).max-content— die Höhe, die der Inhalt einnehmen würde, wenn er nie zum Umbrechen gezwungen wird.fit-content()— begrenzt auf den verfügbaren Platz, überschreitet jedoch niemax-content.
Diese Werte sind praktisch, wenn eine Box „so hoch wie ihr Inhalt, aber nie kürzer" sein soll, ohne einen festen Pixelwert hart kodieren zu müssen.
Ein häufiger Anwendungsfall: Ausdehnung zum Füllen eines Flex-Containers
min-height: 100vh ist ein beliebtes Muster für „Sticky Footer"-Layouts — es macht einen Wrapper mindestens so hoch wie den viewport, sodass der Footer selbst auf kurzen Seiten am Ende sitzt, während die Seite bei viel Inhalt weiter wachsen kann:
.page {
display: flex;
flex-direction: column;
min-height: 100vh; /* at least the full viewport, but can grow */
}
.page main {
flex: 1; /* pushes the footer to the bottom */
}Da es sich um einen Minimalwert handelt, schneidet das Layout langen Inhalt nie ab — die Box wächst einfach über 100vh hinaus. Kombinieren Sie dies mit box-sizing: border-box, damit Abstände und Rahmen nicht unerwartet zur berechneten Höhe hinzugefügt werden.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Der Browser berechnet und wählt eine min-height für das Element. | Ausprobieren » |
| length | Definiert die Mindesthöhe in px, em, rem usw. Standardwert ist 0. | Ausprobieren » |
| % | Legt die Mindesthöhe als Prozentwert der Höhe des Elternelements fest. | |
| calc() | Berechnet die Mindesthöhe mithilfe eines Ausdrucks. | Ausprobieren » |
| fit-content() | Legt die Mindesthöhe basierend auf der Inhaltsgröße fest, begrenzt auf den verfügbaren Platz. | Ausprobieren » |
| max-content | Setzt die Mindesthöhe auf die intrinsische maximale Höhe des Inhalts. | Ausprobieren » |
| min-content | Setzt die Mindesthöhe auf die intrinsische minimale Höhe des Inhalts. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Übung
Verwandte Eigenschaften
height— legt die bevorzugte Höhe eines Elements fest.max-height— begrenzt, wie hoch ein Element werden kann.min-width— das horizontale Gegenstück zumin-height.box-sizing— steuert, ob Abstände und Rahmen zur Höhe zählen.overflow— bestimmt, was passiert, wenn Inhalt die Box überschreitet.