Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

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.

DieheightCSS Eigenschaft gibt die Höhe eines Elements an. Standardmäßig definiert die Eigenschaft die Höhe desInhaltsbereichs. Wennbox-sizing jedoch aufborder-box gesetzt ist, bestimmt sie stattdessen die Höhe desRandbereichs.

Probieren Sie es aus

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section>  <div>    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;}

Diemin-height undmax-height Eigenschaften überschreibenheight.

Hinweis:Als geometrische Eigenschaft giltheight auch für die<svg>,<rect>,<image>, und<foreignObject> SVG-Elemente, wobeiauto auf0 aufgelöst wird und Prozentwerte relativ zur SVG-Viewport-Höhe für<rect> sind. Der CSS-Wert derheight-Eigenschaft überschreibt jeden SVGheight Attributwert, der auf dem SVG-Element gesetzt ist.

Syntax

css

/* <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 desumgebenden 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, jedoch nicht mehr alsmax-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 derMargin-Box des Elements auf die Höhe seinesumgebenden Blocks. Es versucht, die Margin-Box so zu füllen, dass sie den verfügbaren Raum im umgebenden Block einnimmt, verhält sich also ähnlich wie100%, wendet jedoch die resultierende Größe auf die Margin-Box an, anstatt auf die durchbox-sizing bestimmte Box.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einemheight-Wert nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite gezoomt 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

html

<div>I'm 50 pixels tall.</div><div>I'm 25 pixels tall.</div><div>  <div>I'm half the height of my parent.</div></div>

CSS

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 zu füllen

HTML

html

<div>  <div>text</div></div><div>  <div>stretch</div></div>

CSS

@supports not (height: stretch) {  .parent {    display: none !important;  }  body::after {    content: "Your browser doesn't support the `stretch` value yet.";  }}

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換

height

HTML

CSS

Ergebnis

HTML

CSS

Ergebnis

Help improve MDN