CSS height Property
Description
The height
property sets the height of the content of an element. By default, the height is determined automatically based on the content of the element, but if you set a fixed value for the height, then it will be set, despite the amount of content. If the content of an element exceeds the specified height, then the height of the element will remain unchanged, and the content will be displayed on top of it. Due to this feature, it may be possible to superimpose the contents of the elements on top of each other when the elements in the HTML code are sequential. To prevent this, add the overflow property with the value auto to the element's style.
- Initial value
- auto
- Applies to
- All except for table columns, column groups, and non-replaced inline elements
- Inherited
- No
- Computed value
- The percentage or 'auto' (see prose under [percentage]) or the absolute length; 'auto' if the property does not apply
- Animatable
- Yes
- JavaScript syntax
- object.style.height
Interactive Demo
Syntax
height: <length> | <percentage> | auto
Values
- <length>Specifies the width of the content area using a length unit.
- <percentage>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
- autoThe width depends on the values of other properties. See the sections below.
- border-boxIf border-box is used, the length or percentage defined will be applied to the element's border box.
- content-boxIf content-box is used, the length or percentage defined will be applied to the element's content-box.
- autoIf auto is set for the elements width, the browser will determine the width for the element.
- max-contentThe intrinsic preferred width
- min-contentThe intrinsic minimum width
- availableThe containing block width minus horizontal margin, border, and padding
- fit-contentThis will be either the large of the minimum width or the smaller of the preferred width and the available width
Example
<div class="primer1"></div>
<div class="primer2"></div>
<div class="primer3"></div>
<div class="primer4"></div>
<div class="primer5"></div>
.primer1 {
width: 25px;
height: 25px;
background: orange;
}
.primer2 {
width: 50px;
height: 50px;
background: khaki;
}
.primer3 {
width: 75px;
height: 75px;
background: pink;
}
.primer4 {
width: 100px;
height: 75px;
background: blue;
}
.primer5 {
width: 125px;
height: 75px;
background: lime;
}
Browser Support
The following table will show you the current browser support for the CSS height
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 7 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 2nd January 2024