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().