height CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die height-Eigenschaft von CSS legt die Höhe eines Elements fest. 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
height: 150px;
height: 6em;
height: 75%;
height: auto;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box where you can change the height.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
justify-content: center;
color: white;
}
Die Eigenschaften min-height und max-height überschreiben height.
Hinweis:
Als geometrische Eigenschaft gilt height auch für die SVG-Elemente <svg>, <rect>, <image> und <foreignObject>, wobei auto auf 0 aufgelöst wird und Prozentwerte relativ zur SVG-Viewport-Höhe für <rect> sind. Der CSS-Wert der height-Eigenschaft überschreibt jeden SVG-height-Attributwert, der auf das SVG-Element gesetzt ist.
Syntax
/* <length> values */
height: 120px;
height: 10em;
height: 100vh;
height: anchor-size(height);
height: anchor-size(--my-anchor 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 Platz, 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 der Randbox des Elements auf die Höhe seines umgebenden Blocks. Sie versucht, die Randbox an den verfügbaren Raum im umgebenden Block anzupassen, was in gewisser Weise ähnlich zu
100%ist, aber die resultierende Größe auf die Randbox anwendet, anstatt auf die durch box-sizing bestimmte Box.
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()> |
stretch |
fit-content |
contain
<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> =
<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 Prozentangaben 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
Höhe strecken, um den umgebenden Block auszufüllen
HTML
<div class="parent">
<div class="child">text</div>
</div>
<div class="parent">
<div class="child stretch">stretch</div>
</div>
CSS
.parent {
height: 150px;
margin: 1rem;
border: solid;
}
.child {
margin: 1rem;
background: #00999999;
}
.stretch {
height: stretch;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |