CSS height-Eigenschaft
Die CSS height-Eigenschaft legt die Höhe eines Elements fest. Probiere Beispiele mit allen Werten dieser Eigenschaft aus.
Die CSS-Eigenschaft height legt die Höhe der Content-Box eines Elements fest — also den Bereich, in dem Text und untergeordnete Elemente leben. Standardmäßig (height: auto) dimensioniert der Browser ein Block-Element so hoch, dass es seinen Inhalt aufnimmt. Du setzt height also nur dann, wenn du stattdessen eine feste oder relative Größe benötigst.
Standardmäßig gilt der angegebene Wert nur für die Content-Box — er schließt Padding, Rahmen oder Außenabstände nicht ein. Ein <div> mit height: 100px; padding: 20px ist daher auf dem Bildschirm 140px hoch. Damit height auch Padding und Rahmen einschließt, setze box-sizing: border-box — eine nahezu universell empfohlene Best Practice. Die dazugehörige Eigenschaft ist width, die auf der horizontalen Achse genauso funktioniert.
Du kannst die Höhe als Längenangabe (px, em, rem, vh, cm, …) oder als Prozentwert angeben. Der Standardwert ist auto.
Wenn die Eigenschaften min-height und max-height ebenfalls gesetzt sind, begrenzen sie height: Das Element schrumpft nie unter min-height und wächst nie über max-height hinaus.
Wenn height einen numerischen Wert hat und der Inhalt größer als diese Höhe ist, überläuft der Inhalt seine Box. Die Eigenschaft overflow steuert, was dann passiert — abschneiden, verbergen oder eine Scrollleiste anzeigen.
Negative Werte werden nicht akzeptiert.
Das Prozent-Problem. Ein prozentualer height-Wert wird relativ zur Höhe des übergeordneten Elements aufgelöst — und nur dann, wenn dieses Elternelement selbst eine explizite Höhe hat. Wenn die Höhe des Elternelements auto ist (der Standard), hat das height: 50% eines untergeordneten Elements keine feste Referenz und wird als auto behandelt, scheint also nichts zu bewirken. Damit prozentuale Höhen bis zur Seite kaskadieren, gib den Vorfahren eine explizite Höhe — üblicherweise html, body { height: 100%; } — oder verwende die viewport-Einheit vh (height: 50vh ist immer die Hälfte des viewport, unabhängig vom Elternelement).
| Anfangswert | auto |
|---|---|
| Gilt für | alle Elemente |
| Vererbbar | Nein. |
| Animierbar | Ja. height ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.height = "400px"; |
Syntax
Syntax der CSS height-Eigenschaft
height: auto | length | initial | inherit;Beispiel der height-Eigenschaft:
Beispiel der CSS height-Eigenschaft mit Längenwert
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 60px;
background-color: #1c87c9;
color: #eee;
}
p {
height: 30px;
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div>The height of this div element is set to "60px".</div>
<p>The height of this paragraph is set to "30px".</p>
</body>
</html>Ergebnis
Beispiel der height-Eigenschaft mit dem HTML-Tag <image>:
Beispiel der CSS height-Eigenschaft mit auto- und Längenwerten
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-color: #ccc;
}
.height-normal {
height: auto;
}
.height-big {
height: 100px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<p>Here the height is set to "auto"</p>
<img class="height-normal" src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<br />
<hr />
<p>The height for this image is defined as "100px".</p>
<img class="height-big" src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
</body>
</html>Beispiel der height-Eigenschaft mit dem Wert "length":
Beispiel der CSS height-Eigenschaft mit dem vh-Wert
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.container {
height: 50vh;
border: 2px solid #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="container">
<p>Here the height is specified as "50vh".</p>
</div>
</body>
</html>Beispiel der height-Eigenschaft mit allen Werten:
Beispiel der CSS height-Eigenschaft mit auto-, vh-, %- und px-Werten
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.red-container {
height: 30vh;
border: 2px solid #f45e30;
color: #f45e30;
}
.blue-container {
height: 40%;
width: 30%;
border: 2px solid #1c87c9;
color: #1c87c9;
margin-top: 20px;
}
.orange-container {
height: 100px;
border: 2px solid #f9fc35;
color: #f9fc35;
margin-top: 20px;
}
.green-container {
height: auto;
border: 2px solid #8ebf42;
color: #8ebf42;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="red-container">
Height 30vh
<div class="blue-container">
Height 40%
</div>
</div>
<div class="orange-container">
Height 100px;
</div>
<div class="green-container">
Height (auto)
</div>
</body>
</html>Intrinsische Sizing-Keywords
Neben festen Längen und Prozentwerten bietet modernes CSS Keywords, die ein Element an seinen Inhalt statt an eine Zahl anpassen:
.box {
height: max-content; /* tall enough for the content, never wrapping it shorter */
}
.box {
height: min-content; /* the smallest height the content can take */
}
.box {
height: fit-content; /* like auto, but clamps to fit-content(<length>) when given */
}Diese sind besonders nützlich in Flex- und CSS Grid-Layouts, bei denen eine Spur oder ein Element seinen Inhalt umschließen soll, anstatt sich zu dehnen. Sie werden von aktuellen Browsern weitgehend unterstützt.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Bei diesem Wert berechnet der Browser die ursprüngliche Höhe des Bildes oder der Box. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| length | Legt die Höhe mit px, cm, em, rem, vh usw. fest. | Ausprobieren » |
| % | Legt die Höhe in Prozent fest. | |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |