The height border area.

Try it

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

The max-height properties override height.

Note: As a geometric property, height also applies to the <foreignObject> SVG elements, with auto resolving to 0 and percent values being relative to the SVG viewport height for <rect>. The CSS height property value overrides any SVG height attribute value set on the 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;

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: Use the available space, but not more than max-content, i.e. min(max-content, max(min-content, stretch)).
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>)).
stretch: Sets the height of the element's box-sizing.

Note: To check aliases used by browsers for the stretch value and its implementation status, see the Browser compatibility section.

Accessibility

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

Animation type

Examples

Setting height using pixels and percentages

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

Result

Specifications

Specification
CSS Box Sizing Module Level 4 # sizing-values

Browser compatibility

BCD tables only load in the browser