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 legt die Höhe eines Elements fest. Standardmäßig definiert die Eigenschaft die Höhe des Inhaltsbereichs. Ist allerdings box-sizing auf border-box gesetzt, 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 für <rect> relativ zur SVG-Viewport-Höhe sind. Der CSS-height-Eigenschafts-Wert überschreibt jeden SVG height 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(--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 Distanzwert.
<percentage>: Definiert die Höhe als Prozentsatz der Höhe des Umgebungsblocks.
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 Platz, der durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, <length-percentage>)).
stretch: Setzt die Höhe der Margin Box eines Elements auf die Höhe seines Umgebungsblocks. Es versucht, die Margin Box so zu erweitern, dass sie den verfügbaren Platz im Umgebungsblock ausfüllt, ähnlich wie bei 100%, jedoch wird die resultierende Größe auf die Margin Box angewendet und nicht auf die durch box-sizing bestimmte Box.

Hinweis: Um die von Browsern für den stretch-Wert verwendeten Aliase und deren Implementierungsstatus zu überprüfen, sehen Sie sich den Abschnitt zur Browser-Kompatibilität an.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer height-Einstellung 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

Festlegen der Höhe mit Pixeln und Prozentsätzen

HTML

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

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