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-Eigenschaft von CSS legt die Höhe eines Elements fest. Standardmäßig definiert die Eigenschaft die Höhe des Inhaltsbereichs. Wenn jedoch box-sizing auf border-box gesetzt ist, wird stattdessen die Höhe des Randbereichs bestimmt.

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: #ffffff;
}

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 sich zu 0 auflöst und Prozentwerte relativ zur SVG-Viewport-Höhe für <rect> sind. Der CSS-Wert der height-Eigenschaft überschreibt jeden mit dem SVG-Attribut height festgelegten Wert auf dem SVG-Element.

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: 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 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 minimale Höhe.
fit-content: Nutzt den verfügbaren Raum, 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, ersetzt durch das angegebene Argument, 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. Es versucht, die Randbox so zu gestalten, dass sie den verfügbaren Raum im umgebenden Block füllt, verhält sich also in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Randbox statt auf die durch box-sizing bestimmte Box an.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer festgelegten height nicht abgeschnitten werden und/oder anderen Inhalt nicht verdecken, wenn die Seite zum Vergrößern der Textgröße gezoomt wird.

Formelle 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()`;

Formelle 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> = 
  <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

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

Höhe auf Blockinhalt ausdehnen

HTML

html

<div class="parent">
  <div class="child">text</div>
</div>

<div class="parent">
  <div class="child stretch">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: #0999;
}

.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

width
box-sizing
min-height, max-height
block-size, inline-size
anchor-size()
clamp()
minmax()
SVG-Attribut height
Einführung in das CSS-Grundlegende-Boxmodell
CSS-Boxmodell Modul