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.
Die height
CSS Eigenschaft gibt die Höhe eines Elements an. Standardmäßig definiert die Eigenschaft die Höhe des Inhaltsbereichs. Wenn jedoch box-sizing
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 auto
zu 0
aufgelöst wird und Prozentwerte relativ zur SVG-Viewport-Höhe für <rect>
sind. Der CSS height
Eigenschaftswert überschreibt jeden SVG height
Attributwert, der auf dem SVG-Element gesetzt 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: minmax(min-content, anchor-size(width));
height: stretch;
/* Global values */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;
Werte
<length>
-
Definiert die Höhe als einen 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 Platz, aber nicht mehr als max-content, d. h.
min(max-content, max(min-content, stretch))
. fit-content(
<length-percentage>
)-
Nutzt die fit-content Formel mit dem verfügbaren Platz, der durch das angegebene Argument ersetzt wird, d. h.
min(max-content, max(min-content, <length-percentage>))
. stretch
-
Setzt die Höhe der Randbox des Elements auf die Höhe seines umgebenden Blocks. Es versucht, die Randbox so zu gestalten, dass sie den verfügbaren Platz im umgebenden Block ausfüllt, und verhält sich so in gewisser Weise ähnlich wie
100%
, wendet aber die resultierende Größe auf die Randbox an, anstatt auf die durch box-sizing bestimmte Box.Hinweis: Um zu überprüfen, welche Aliase von Browsern für den
stretch
Wert verwendet werden und wie dessen Implementierungsstatus aussieht, siehe den Abschnitt Browser-Kompatibilität.
Barrierefreiheit
Stellen Sie sicher, dass Elemente, die mit height
gesetzt sind, nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite zum Vergrößern der Textgröße gezoomt wird.
Formale Definition
Initialer Wert | 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() ; |
Formale 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