CSS Height Property
The height property in CSS is known for specifying the height of an element. The property defines the height of the content area by default. In case the box-sizing is set to the border-box, it determines the height of the border area.
This property can be specified as one of the values like- length, percentage, auto, max-content, min-content, fit-content. The length value defines the height as an absolute value.
According to the auto value, the browser calculates and selects a height for the specified element.
Syntax
auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
where
<length-percentage> = <length> | <percentage>
Example: CSS height Property
In the example below, we are using the height property of CSS to give a dimension to our grid containers. In this case, we have given different height values to different grid boxes so that we can understand the difference between the height values for each box.
<!DOCTYPE html>
<html>
<head>
<title>The height property in CSS</title>
<style type="text/css">
div {
width: 250px;
margin-bottom: 5px;
border: 2px solid deeppink;
}
#taller {
height: 50px;
}
#shorter {
height: 25px;
}
#parent {
height: 100px;
}
#child {
height: 50%;
width: 75%;
}
</style>
</head>
<body>
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
<div id="child">I'm half the height of my parent.</div>
</div>
</body>
</html>
Output
Example 2: CSS height Property
In the second example, we have given the height property value as max-content, fit-content, and the percentage values for the height property. In the case of the max-content value, the box gets stretched to an area where the maximum content has been written.
<!DOCTYPE html>
<html>
<head>
<title>The height property in CSS</title>
<style type="text/css">
div {
width: 250px;
margin-bottom: 5px;
border: 4px solid red;
}
#taller {
height: max-content;
}
#shorter {
height: fit-content(20em);
}
#parent {
height: 100px;
}
#child {
height: 50%;
width: 75%;
}
</style>
</head>
<body>
<div id="taller">Study Tonight</div>
<div id="shorter">is the best place</div>
<div id="parent">
<div id="child">to learn digital courses in a simplified way</div>
</div>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
7 |
7 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the height property in CSS is auto. This property is applicable to all elements. It is not an inherited property. The percentage value refers to the percentage which is calculated with respect to the height of the generated containing block of the box. The computed value for this property is a percentage or auto or the absolute length. The animation type for this property is a length or a percentage or calc().
