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 CSS Eigenschaft 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: #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 zu 0 aufgelöst wird und Prozentwerte relativ zur Höhe des SVG-Anzeigefensters für <rect> sind. Der CSS height Eigenschaftswert überschreibt jeglichen 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: 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 spezifizierte Element.

max-content

Die intrinsisch bevorzugte Höhe.

min-content

Die intrinsisch minimale Höhe.

fit-content

Verwendet den verfügbaren Platz, aber nicht mehr als max-content, also 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, also 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 füllen, dass sie den verfügbaren Raum im umgebenden Block ausfüllt, verhält sich also in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Randbox an, anstatt auf die Box, die von box-sizing bestimmt wird.

Barrierefreiheit

Stellen Sie sicher, dass Elemente, die mit einer height versehen sind, nicht abgeschnitten werden und/oder keine anderen Inhalte verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente außer nicht ersetzte Inlineelemente, Tabellenspalten und Spaltengruppen
VererbtNein
ProzentwerteDer 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 Wertein Prozentwert oder auto oder die absolute Länge
AnimationstypLä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> = 
  <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 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 dehnen, um den umgebenden Block zu füllen

HTML

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

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

CSS

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