CSS Height

The height property in CSS is used to define the height of an element. It determines how tall an element will be, and it can be set using various units or percentages.

1. Basic Syntax

The basic syntax for setting the height of an element is:

element {
  height: value;
}

Try It Now

2. Values for the height Property

  • Auto: This is the default value. The height is automatically adjusted based on the content. 
    div {
  height: auto;
}

    Try It Now

  • Length: Specify a fixed height using units like px, em, rem, cm, etc. 
    div {
  height: 200px;
}

    Try It Now

  • Percentage: Set the height as a percentage of the containing element. 
    div {
  height: 50%;
}

    Try It Now

  • Max-Height: Defines the maximum height of an element. If the content is smaller than the maximum height, it will shrink accordingly. 
    div {
  max-height: 400px;
}

    Try It Now

  • Min-Height: Defines the minimum height of an element. The element will not be smaller than the minimum height. 
    div {
  min-height: 100px;
}

    Try It Now

3. Examples

Fixed Height Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-height {
      height: 150px;
      width: 300px;
      background-color: lightblue;
    }
  </style>
  <title>Fixed Height Example</title>
</head>
<body>
  <div class="fixed-height">This is a box with a fixed height.</div>
</body>
</html>

Try It Now

Percentage Height Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      height: 300px;
      width: 300px;
      background-color: lightgray;
    }
    .percentage-height {
      height: 50%;
      background-color: lightgreen;
    }
  </style>
  <title>Percentage Height Example</title>
</head>
<body>
  <div class="container">
    <div class="percentage-height">This box is 50% of its parent container's height.</div>
  </div>
</body>
</html>

Try It Now

Min and Max Height Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .min-max-height {
      height: auto;
      min-height: 100px;
      max-height: 300px;
      background-color: lightcoral;
      overflow: auto;
    }
  </style>
  <title>Min and Max Height Example</title>
</head>
<body>
  <div class="min-max-height">
    This box has a minimum height of 100px and a maximum height of 300px. If the content exceeds the maximum height, it will be scrollable.
  </div>
</body>
</html>

Try It Now

4. Important Notes

  • Content Overflow: If the content inside an element is larger than the set height, it can overflow. You can manage this using the overflow property.
  • Responsive Design: Avoid using fixed heights in responsive design unless necessary. Use percentages or flexible units like vh (viewport height) to ensure better adaptability across different screen sizes.
  • Flexbox and Grid: When using flexbox or grid layout, height can behave differently based on the layout properties.

Conclusion

The height property is essential for controlling the vertical dimension of elements in web design. By mastering the use of fixed, percentage, and flexible heights, you can create layouts that are both functional and aesthetically pleasing.