height

height sets an element’s physical height. It normally measures content, or the border box with box-sizing. It is not a substitute for planning how overflowing content remains reachable.

Resolve a percentage

The parent has a definite 160px height. Its child’s 50% height is therefore 80px; the surrounding background reveals the remaining space.

<div class="parent"><div class="child">height: 50%</div></div>

.parent {
  height: 160px;
  background: #e2e8f0;
}
.child {
  height: 50%;
  background: #dbeafe;
}

Leave room for content growth

A minimum height supplies initial space while permitting the panel to grow. Add another paragraph or enlarge the text to compare it with a fixed height.

<div class="panel">
  <p>A short note.</p>
  <p>More content can make this panel taller.</p>
</div>

.panel {
  min-height: 6rem;
  padding: 1rem;
  box-sizing: border-box;
  background: #eff6ff;
}

Values and failure cases

The initial value is auto and height is not inherited. Lengths, percentages, and intrinsic sizing values are available; newer stretch and sizing functions require value-specific support checks. The physical height property is different from writing-mode-aware block-size.

In ordinary block layout, a percentage height generally needs a definite containing-block height; with a content-dependent parent it behaves as auto. Flex, Grid, and positioned layout have additional percentage-resolution rules. Simply adding height:100% to a child does not mean “fill the viewport.”

Height does not size an ordinary non-replaced inline box. Min-height and max-height constrain its used value, with the minimum winning a conflict. Avoid clipping text at zoomed sizes. Use min-height or a deliberately scrollable overflow region when needed.

Sources and browser support

MDN: height describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.