CSS height Property

The height property specifies the vertical height of the content area of an element.

selector { height: value; }
auto The browser calculates the height based on the content of the element.
<length> Defines the height using specific units like px, em, rem, or vh.
<percentage> Defines the height as a percentage of the containing block's height.
max-content The intrinsic preferred height based on the content.
min-content The intrinsic minimum height based on the content.
fit-content Uses the available space, but not more than max-content.

Code Examples

A basic example showing a div with a fixed pixel height and a background color.

<div style="height: 200px; background-color: #008080; color: #ffffff; padding: 20px;">
  This box has a fixed height of 200 pixels.
</div>

An advanced example using viewport units, Flexbox centering, and JavaScript to toggle between half-screen and full-screen height.

<div id="hero" style="min-height: 50vh; background-color: #333333; color: #ffffff; display: flex; align-items: center; justify-content: center;">
  <button onclick="toggleHeight()">Expand Section</button>
</div>

<script>
function toggleHeight() {
  const hero = document.getElementById("hero");
  if (hero.style.height === "100vh") {
    hero.style.height = "50vh";
  } else {
    hero.style.height = "100vh";
    hero.style.backgroundColor = "#444444";
  }
}
</script>

Pro Tip

Use the vh (viewport height) unit to create sections that perfectly fill the user's screen. For example, height: 100vh; ensures a section is exactly as tall as the browser window, regardless of the device. Combine this with Flexbox to center content perfectly in the middle of the screen.

Deep Dive

Think of the height property as the vertical boundary of a container. By default, the box model adds padding and borders to the outside of this value. If you set a height of 100px and add 20px of padding, your box is actually 140px tall unless you use box-sizing: border-box. When using percentages, the parent element must have a defined height, or the child will not know what to calculate against, usually resulting in a height of 0 or auto. It is the vertical counterpart to the width property.

Best Practices

Don't fix the height of containers that hold dynamic text. If the text grows or the user increases their font size, the text will spill out of your container like water over a bucket. Instead, use min-height to ensure the box is at least a certain size but can still grow vertically to accommodate its contents.

Common Pitfalls

The most common headache is trying to use 100% height on a child when the parent height is set to auto. If the parent doesn't have a specific height, the percentage value on the child has nothing to reference. Also, remember that height does not include margins, which are the space outside the element's 'fence'.

Accessibility

Hard-coding heights can cause content overlap or clipping when users utilize browser zoom features. Always test your layouts at 200% zoom to ensure that text remains readable and the containers expand appropriately without cutting off vital information.

Dev Data Table: height property

default auto
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 document.getElementById("box").style.height = "200px";
js_syntax_2 document.getElementById("box").style.setProperty("height", "200px");
js_note When using JavaScript to set height, you must include the unit as a string, such as "px" or "%".
browsers { "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1", "Opera": "3.5", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10.1" }
results render here...