CSS min-height

The CSS min-height property is used to define the minimum height for an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: purple; color: white; margin: 10px 0;}
      div.a{min-height: 110px;}
      div.b{min-height: 110px;}
   </style>
</head>
<body>
   
   <div class="a">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <div class="b">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
         eaque accusamus quis aspernatur quam perspiciatis reiciendis magni
         expedita corporis tempora.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas
         fuga quibusdam nulla.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
   </div>

</body>
</html>
Output

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet eaque accusamus quis aspernatur quam perspiciatis reiciendis magni expedita corporis tempora.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas fuga quibusdam nulla.

Lorem ipsum dolor sit amet consectetur adipisicing.

In above example, since the content height of first DIV is less than the specified min-height property, that is 110px, therefore the height of this DIV is only set to 110px. Whereas the content height of second DIV is greater than 110px, therefore the height of this DIV gets increased to cover the entire content inside the DIV.

Note - The min-height property does similar job as of height property, except that, it does not applied when the height of specified element's content is greater than the defined minimum height value, as shown in above example.

We can say that the min-height property is flexible over the height property, as if the content height is greater than defined minimum height, then this property has no effect.

Note - The min-height property overrides the height property.

CSS min-height Syntax

The syntax of min-height property in CSS, is:

min-height: x;

The value of x should be any of the following:

  • Length - We can define custom minimum height like 220px, 14cm etc.
  • initial - Used to use the default value
  • inherit - Used to use the value inherited by the parent element

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋