height
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die height CSS Eigenschaft spezifiziert die Höhe eines Elements. Standardmäßig definiert die Eigenschaft die Höhe des Inhaltsbereichs. Wenn box-sizing jedoch auf border-box gesetzt ist, bestimmt sie stattdessen die Höhe des Randbereichs.
Probieren Sie es aus
Die Eigenschaften min-height und max-height überschreiben height.
Hinweis:
Als geometrische Eigenschaft gilt height auch für die <svg>, <rect>, <image> und <foreignObject> SVG-Elemente, wobei sich auto zu 0 auflöst und Prozentwerte für <rect> relativ zur SVG-Viewport-Höhe sind. Der CSS-height-Eigenschaftswert überschreibt jeden SVG-height-Attributwert, der auf dem SVG-Element festgelegt ist.
Syntax
/* <length> values */
height: 120px;
height: 10em;
height: 100vh;
height: anchor-size(height);
height: anchor-size(--myAnchor self-block, 250px);
height: clamp(200px, anchor-size(width));
/* <percentage> value */
height: 75%;
/* Keyword values */
height: max-content;
height: min-content;
height: fit-content;
height: fit-content(20em);
height: auto;
height: stretch;
/* Global values */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;
Werte
<length>-
Definiert die Höhe als Distanzwert.
<percentage>-
Definiert die Höhe als Prozentsatz der Höhe des umgebenden Blocks.
auto-
Der Browser berechnet und wählt eine Höhe für das angegebene Element.
max-content-
Die intrinsische bevorzugte Höhe.
min-content-
Die intrinsische Mindesthöhe.
fit-content-
Nutzt den verfügbaren Raum, aber nicht mehr als max-content, d.h.
min(max-content, max(min-content, stretch)). fit-content(<length-percentage>)-
Verwendet die Fit-Content-Formel mit dem verfügbaren Raum, der durch das angegebene Argument ersetzt wird, d.h.
min(max-content, max(min-content, <length-percentage>)). stretch-
Setzt die Höhe des Elements Außenbox auf die Höhe seines umgebenden Blocks. Es versucht, die Außenbox auf den verfügbaren Raum im umgebenden Block auszufüllen, verhält sich also ähnlich wie
100%, jedoch wird die resultierende Größe auf die Außenbox angewendet statt auf die Box, die durch box-sizing bestimmt wird.Hinweis: Um Aliasnamen zu überprüfen, die von Browsern für den
stretch-Wert verwendet werden und den Implementierungsstatus, siehe den Abschnitt Browser-Kompatibilität.
Barrierefreiheit
Stellen Sie sicher, dass Elemente mit einer height-Einstellung nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.
Offizielle Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente außer nicht ersetzte Inlineelemente, Tabellenspalten und Spaltengruppen |
| Vererbt | Nein |
| Prozentwerte | Der Prozentwert wird unter Berücksichtigung der Höhe des die generierte Box beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde (d. h. sie hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, ist der berechnete Wert auto. Eine prozentuale Höhe beim Wurzelelement ist relativ zum ursprünglichen beinhaltenden Block. |
| Berechneter Wert | ein Prozentwert oder auto oder die absolute Länge |
| Animationstyp | Längenangabe, Prozentsatz oder calc(); |
Offizielle Syntax
height =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Beispiele
Höhe mit Pixeln und Prozentsätzen festlegen
HTML
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
<div id="child">I'm half the height of my parent.</div>
</div>
CSS
div {
width: 250px;
margin-bottom: 5px;
border: 2px solid blue;
}
#taller {
height: 50px;
}
#shorter {
height: 25px;
}
#parent {
height: 100px;
}
#child {
height: 50%;
width: 75%;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |
Browser-Kompatibilität
BCD tables only load in the browser