CSS height-Eigenschaft
Die height-Eigenschaft wird verwendet, um die Höhe eines Elements festzulegen. Diese Eigenschaft beinhaltet Padding, Rahmen oder Außenabstände nicht. Die height-Eigenschaft kann in „px“, „cm“, „vh“ oder in Prozent angegeben werden. Der Standardwert ist „auto“.
Wenn die Eigenschaften min-height und max-height verwendet werden, schränken sie die height-Eigenschaft ein.
Wenn height auf einen der numerischen Werte wie rem, px oder % festgelegt wird und der Inhalt nicht in die angegebene Höhe passt, führt dies zu einem Überlauf. Die CSS-overflow-Eigenschaft legt fest, wie der Container mit dem Überlauf umgeht.
INFO
Negative Werte werden nicht akzeptiert.
| Anfangswert | auto |
|---|---|
| Gilt für | alle Elemente |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Höhe ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.height = "400px"; |
Syntax
Syntax der CSS height-Eigenschaft
height: auto | length | initial | inherit;Beispiel für die 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 <image>-Tag:
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://www.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://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
</body>
</html>Beispiel der height-Eigenschaft mit dem „length“-Wert:
Beispiel der CSS height-Eigenschaft bei Verwendung des vh-Werts
<!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>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| auto | Wenn wir diesen Wert verwenden, berechnet der Browser die ursprüngliche Höhe des Bilds oder der Box. Dies ist der Standardwert dieser Eigenschaft. | Testen » |
| length | Definiert die Höhe in px, cm, em, rem, vh usw. | Testen » |
| % | Definiert die Höhe in Prozent. | |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche möglichen Einstellungen gibt es für die height-Eigenschaft in CSS?