Sets the height of an element.
The height property sets the height of an element's content area. By default (with box-sizing: content-box), it does not include padding, border, or margin. With box-sizing: border-box, it includes padding and border.
The height can be specified as a length, percentage, or keyword. Percentage values are relative to the height of the containing block, but the containing block must have an explicit height for percentages to work. The auto keyword lets the browser calculate the height based on the content.
Modern values like min-content, max-content, and fit-content() allow for content-based sizing. The min-height and max-height properties can be used alongside height to constrain the element's size.
| Name | Description | Optional |
|---|---|---|
value |
A length (100px, 10rem), percentage (50%), or keyword (auto, min-content, max-content, fit-content). | No |
.banner {
height: 300px;
}
.full-height {
height: 100vh;
}