height
The height of an element.
Syntax
height: value;Values
| Parameter | Type | Description |
|---|---|---|
| px | length | A fixed height. |
| % | percentage | A percentage of the parent's height — works only if the parent's height is set. |
| auto | keyword | As tall as the content (the default). |
| vh | dvh | length | A share of the window height: `100dvh` is the full screen. |
Examples
Automatic and fixed height:
<style>
div { background: lavender; margin-bottom: 6px; padding: 6px; }
</style>
<div>auto — as tall as the content</div>
<div style="height: 80px;">80px</div>A fixed height with a scrollbar for long content:
<div style="height: 60px; overflow: auto; border: 1px solid gray;">
A block with a fixed height. When the text is longer than the block, it scrolls instead of spilling out over the content below.
</div>Notes
Avoid a fixed height for blocks with text: with a larger font or a longer translation, the text will spill out. Use min-height instead — the block can still grow.
See also
- width — The width of an element.
- max-height — The maximum height: the element grows with its content only up to this limit.
- overflow — What to do with content that does not fit into the element.
- px, em, rem, %, vw, vh — Units for lengths in CSS: absolute pixels and relative units.
Related recipes
In the tutorial
- The box model — What an element consists of in CSS — content, padding, border and margin, sizes, centering and box-sizing.