CSS Height
CSS height
CSS height attribute
height of CSS The height property sets the height of the content area of an element. If box-sizing is set to border-box, then the height property sets the height of the border area.
The value specified by the height property is overridden by the values defined by the min-height and max-height properties.
Syntax
CSS allows you to set the height of an element in a variety of ways. Let’s examine all the possible syntaxes for setting the height of an element.
Length value
height: 120px;
height: 10em;
height: 100vh;
Percent value
height: 75%;
height: 50%;
Keyword value
height: auto;
height: max-content;
height: min-content;
height: fit-content(20em);
Global values
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;
Negative values such as height: -200px are not accepted.
Applies to
Applies to all HTML elements except non-replaced inline elements, table columns, and column groups.
DOM Syntax
object.style.height = "100px";
CSS Height – Length Values
CSS allows you to set the height of an element to a specific length unit, such as pixels (px), centimeters (cm), inches (in), etc. Here’s an example of adding height to a div element:
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
padding:10px;
}
div.a {
height: 100px;
background-color: rgb(230, 230, 203);
}
div.b {
height: 1.5in;
background-color: rgb(230, 230, 203);
}
</style>
</head>
<body>
<div class="a">This div element has a height of 100px.</div>
<div class="b">This div element has a height of 1.5 inches.</div>
</body>
</html>
CSS Height – Percentage Values
CSS allows you to set the height of an element as a percentage of the containing element’s height. Here’s an example of adding a percentage value to a div element’s height:
<html>
<head>
<style>
.parent{
border: 1px solid black;
height: 100px;
background-color: rgb(230, 230, 203);
}
.child{
border: 1px solid black;
height: 80%;
background-color: rgb(76 175 80);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<p>This div element has a height of 80% of the parent.</p>
</div>
</div>
</body>
</html>
CSS Height – Auto Values
Below is an example of setting the height of a div element to auto. Here, the browser will automatically calculate the height based on the content. This is the default height of an element.
<html>
<head>
<style>
div.auto {
height: auto;
background-color: yellow;
padding: 20px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="auto">This div element has a height set as auto.</div>
</body>
</html>
CSS Height – max-content/min-content
This is an example of setting the height equal to max-content and min-content. max-content defines the intrinsic preferred height, while min-content defines the intrinsic minimum height.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.c {
height: max-content;
background-color: bisque;
}
div.d {
height: min-content;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="c">This div element has a height as max-content. This div element has a height as max-content.
This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content.</div>
<div class="d">This div element has a height of min-content.</div>
</body>
</html>
CSS Height – clamp() Function
This makes it possible to select a value intermediate between a range of values specified between a minimum and maximum height. Here is an example of setting the height using the clamp() function:
<html>
<head>
<style>
p{
display: inline-flex;
border: 1px solid black;
background-color: yellow;
height: clamp(20px, 100px, 180px);
width: clamp(50px, 100px, 200px);
padding: 1em;
margin: 2em;
}
</style>
<body>
<div>
<p>The clamp function is used for height & width, where the background color is selected for the value between the
min and max ranges of height and width.</p>
</div>
</body>
</html>