The height Property in CSS

The height property in CSS is used to set the height of an element. This property is crucial for defining how much vertical space an element will occupy on a webpage. Like the width property, height helps in controlling the layout and appearance of elements within their containers.

Values of height

1. Fixed Values (e.g., px, em, rem, vh)

   • Pixels (px): Defines the height in pixels, providing a fixed and absolute measurement.

     .fixed-height {
       height: 200px;
     }
     

   • Em Units (em): Defines the height relative to the font size of the element or its parent.

     .em-height {
       height: 10em;
     }
     

   • Root Em Units (rem): Defines the height relative to the root element’s font size.

     .rem-height {
       height: 8rem;
     }
     

   • Viewport Height (vh): Defines the height as a percentage of the viewport’s height.

     .viewport-height {
       height: 50vh;
     }
     

2. Percentage (%)

   • Defines the height as a percentage of the height of the containing block or parent element. The height of the parent element must be defined for percentage heights to work correctly.

     .percent-height {
       height: 50%;
     }
     

3. Auto

   • The default value. The element’s height is determined by its content or by other layout rules. It adjusts automatically based on the content inside.

     .auto-height {
       height: auto;
     }
     

4. Max-Height and Min-Height

   • These properties are used to set maximum and minimum heights for an element.
     • max-height: Limits the maximum height of an element.

       .max-height {
         max-height: 400px;
       }
       

     • min-height: Sets the minimum height of an element.

       .min-height {
         min-height: 200px;
       }
       

Examples

<div class="container">
  <div class="fixed-height">Fixed Height</div>
  <div class="percent-height">Percentage Height</div>
  <div class="auto-height">Auto Height</div>
</div>

.container {
  height: 500px;
  border: 1px solid #ccc;
}

.fixed-height {
  height: 200px;
  background-color: lightblue;
}

.percent-height {
  height: 50%;
  background-color: lightcoral;
}

.auto-height {
  height: auto;
  background-color: lightgreen;
}

Explanation

• Fixed Height: The .fixed-height element has a set height of 200px. It occupies exactly 200 pixels of vertical space.
• Percentage Height: The .percent-height element has a height of 50%, so it takes up half of the height of its parent container (which is 500px, so it will be 250px high).
• Auto Height: The .auto-height element’s height is determined by its content and adjusts accordingly within its parent container.

Use Cases

• Layout Design: Define the height of elements to create specific vertical layouts, such as fixed-size sections or responsive columns.
• Responsive Design: Use viewport units and percentages to make elements adapt to different screen sizes and device orientations.
• Content Management: Control how much space an element occupies, especially when combined with properties like overflow to manage content overflow.