Min-height

This chapter will help us to understand how to use CSS min-height property in our website.

CSS min-height property sets the minimum height of an element. By using this property, we prevent the height property 's value from becoming smaller than the value specified for min-height.

Meanwhile, we must know that CSS min-height property overrides height property and max-height property.

The property takes a CSS length (px, pt, em, etc.) or a percentage. Negative values are not accepted.

CSS Syntax

min-height: length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
          div {
               min-height: 50px;
               background-color: orange;
            }
      </style>
   </head>
   <body>

          <div> We set this text area's minimum height as 50px. </div>

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
length It defines minimum height in px, pt, cm, etc.
% It defines minimum height in percent of the containing element.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.