Height Property
Last updated: 2026-09-13
height Height Property
The height property sets the height of an element's content area and, along with width, is a core sizing property of the CSS box model. Its default value, auto, lets the browser compute the height from the content, which is the most common and recommended approach. Percentage heights only take effect when the parent has an explicit height; otherwise they resolve to 0.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | non-replaced |
| Animation Type | length |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | The browser calculates the height automatically. |
<length> | Type | A fixed length value. |
<percentage> | Type | A percentage relative to the containing block's height. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： A percentage height requires the parent to have an explicit height; otherwise it has no effect. Use vh units if you want an element to fill the viewport.
❓ FAQ
QWhy doesn't height:100% work?
ABecause a percentage height is resolved against the parent's content area height, and when the parent's height is auto (the default), 100% of auto is still auto, so the child's percentage height is ignored. Solutions: give the parent an explicit height, which is the most straightforward fix and works everywhere; use vh units, where height:100vh equals the viewport height; or use flex or grid so the child stretches automatically.
QHow do I let an element's height grow with its content?
AKeep the default height:auto; the height of a block-level element is then determined by its content. For finer control, pair min-height as a lower bound and max-height as an upper bound: min-height:200px guarantees a minimum height while letting the box grow when content is taller, and max-height caps the height with overflow handling the excess. Avoid hard-coding height for ordinary content.
QWhat's the difference between height:auto and height:100vh?
Aheight:auto sizes the element to its content, so short content makes a short box and long content makes a tall one. height:100vh makes the element exactly as tall as the viewport, so it fills a full screen even with little content and overflows when content exceeds it. To make a page body at least one screen tall while still allowing growth, prefer min-height:100vh over height:100vh.
QHow do I make a child element fill its parent's height?
AOption one: give the parent a fixed height and the child height:100%. Option two: set the parent to display:flex and let the child stretch with align-self:stretch, since flex items stretch by default. Option three: in grid, use height:100% or 1fr for the child. Note that height:100% only works when the parent itself has a definite height; otherwise it is ignored.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
