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 legt die Höhe eines Elements fest. Standardmäßig definiert diese Eigenschaft die Höhe des Inhaltsbereichs. Wenn box-sizing
auf border-box
gesetzt ist, wird stattdessen die Höhe des Randbereichs bestimmt.
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
auf 0
auflöst und Prozentwerte relativ zur Höhe des SVG-Viewports für <rect>
sind. Der CSS-height
-Wert überschreibt jeden in einem SVG-Element gesetzten height
-Attributwert.
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 einen Prozentsatz der Höhe des umschließenden Blocks.
auto
-
Der Browser berechnet und wählt eine Höhe für das angegebene Element aus.
max-content
-
Die bevorzugte intrinsische Höhe.
min-content
-
Die minimale intrinsische Höhe.
fit-content
-
Nutzt den verfügbaren Platz, jedoch 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 der Aussenabgrenzung des Elements auf die Höhe seines umschließenden Blocks. Ziel ist es, die Außenabgrenzung so zu gestalten, dass der verfügbare Platz im umschließenden Block ausgefüllt wird. In gewisser Weise verhält sich dies ähnlich zu
100%
, jedoch wird die resultierende Größe auf die Außenabgrenzung angewendet anstelle des Bereichs, der von box-sizing definiert wird.Hinweis: Um die von Browsern verwendeten Aliases für den Wert
stretch
und deren Implementierungsstatus zu überprüfen, sehen Sie im Abschnitt Browser-Kompatibilität nach.
Barrierefreiheit
Stellen Sie sicher, dass Elemente, die mit einer height
gesetzt sind, nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.
Formale 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() ; |
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 mithilfe von Pixeln und Prozentsätzen einstellen
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
height | ||||||||||||
anchor-size() | ||||||||||||
auto | ||||||||||||
fit-content | ||||||||||||
fit-content() | ||||||||||||
max-content | ||||||||||||
min-content | ||||||||||||
stretch |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.