height

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.

The min-height and max-height properties override height.

Syntax

/* <length> values */
height: 120px;
height: 10em;
height: 100vh;

/* <percentage> value */
height: 75%;

/* Keyword values */
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;

/* Global values */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

Values

<length>: Defines the height as a distance value.
<percentage>: Defines the height as a percentage of the containing block's height.
auto: The browser will calculate and select a height for the specified element.
max-content: The intrinsic preferred height.
min-content: The intrinsic minimum height.
fit-content: Box will use the available space, but never more than max-content
fit-content(<length-percentage>): Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>))
clamp(): Enables selecting a middle value within a range of values between a defined minimum and maximum

Accessibility concerns

Ensure that elements set with a height aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.

Formal definition

Initial value	auto
Applies to	all elements except non-replaced inlines
Inherited	no
Computed value	as specified, with <length-percentage> values computed
Animation type	by computed value type, recursing into fit-content()

Formal syntax

auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)

Examples

Setting height using pixels and percentages

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%;
}

css properties height