height
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die height-Eigenschaft von CSS 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
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 zu 0 aufgelöst wird und Prozentwerte für <rect> relativ zur SVG-Viewport-Höhe sind. Der CSS-Wert der height-Eigenschaft überschreibt jeden SVG-height-Attributwert, der für das SVG-Element festgelegt wurde.
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 Streckenwert.
<percentage>-
Definiert die Höhe als 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 intrinsische bevorzugte Höhe.
min-content-
Die intrinsische Mindesthöhe.
fit-content-
Nutzt den verfügbaren Raum, 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, ersetzt durch das angegebene Argument, d.h.
min(max-content, max(min-content, <length-percentage>)). stretch-
Setzt die Höhe des Margins-Box des Elements auf die Höhe seines umschließenden Blocks. Es versucht, die Margins-Box so zu skalieren, dass sie den verfügbaren Raum im umschließenden Block füllt, ähnlich wie
100%, wendet jedoch die resultierende Größe auf die Margins-Box anstelle der durch box-sizing bestimmten Box an.
Barrierefreiheit
Stellen Sie sicher, dass Elemente mit einer festgelegten height nicht abgeschnitten und/oder andere Inhalte nicht verdeckt werden, 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 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
Höhe strecken, um den umschließenden Block zu fü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
| Specification |
|---|
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |
Browser-Kompatibilität
Loading…