Selected Reading
Q&A

CSS - Height

CSS Height Property

The CSS height property sets the height of an element's content area. In case, the box-sizing is set to border-box, the property height sets the height of the border area.

The value specified by the height property gets oevrriden by the values defined by min-height and max-height properties.

Syntax

CSS allows to set height of an element in a variety of ways. Let's check all the possible available syntax to set the height of an element.

Length Value

height: 120px;
height: 10em;
height: 100vh;

Percentage Value

height: 75%;
height: 50%;

Keyword Value

height: auto;
height: max-content;
height: min-content;
height: fit-content(20em);

Global Value

height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

Negative values like height: -200px are not accepted.

Applies to

All the HTML elements except non-replaced inline elements, table columns, and column groups.

DOM Syntax

object.style.height = "100px";

CSS Height - Demo

Try to select different values for CSS height property and see the result in right box.

CSS Height - Length Value

CSS allows to set the height of an element to a specific length value such as pixels (px), centimeters (cm), inches (in), etc. Here is an example of adding height to a div element in length units:

<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 Value

CSS allows to set the height of an element to a percentage of the height of the containing element. Here is an example of adding height to a div element in percentage values:

<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 80% height of the parent.</p>
       </div>
   </div>
</body>
</html>

CSS Height - auto Values

Following is an example of adding height to a div element set as auto. Here the browser will calculate the height automatically based on the content. It 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

Here is an example of height equal to max-content and min-content. The max-content defines the intrinsic preferred height where as 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 enables selection of a middle value within a range of values, specified between minimum and maximum height. Here is the example where clamp() function is used for setting height:

<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>