CSS - min-height



The min-height property is used to set a lower bound on the height of an element.

Possible Values

  • length − Any length unit. The element can never have a value for height which is lower than this value. Default value is 0.

  • percentage − It sets the element's minimum height in the percentage of the height of the containing block.

  • initial − Sets the value of min-height to its default value.

  • inherit − The value of min-height is inherited from its parent value.

Applies to

All the HTML elements except non-replaced inline elements and table elements.

DOM Syntax

object.style.minHeight = "50px"

CSS min-height Example

The following example demonstrates how to use min-height property sets the minimum height of an element −

<html>
   <head>
      <style>
            div.a {
                   border: 2px solid red;
                   min-height: 200px;
                   width: 80%;
                   overflow: auto;
                   margin-bottom:5px;
                  }
            div.b {
                   border: 2px solid blue;
                   min-height: 40%;
                   overflow: auto;
                   margin-bottom:5px;
                  }
            div.c {
                   border: 2px solid green;
                   min-height: 20px;
                   overflow: auto;
                   margin-bottom:5px;
                  }
      </style>
   </head>
   <body>
      <div style="border:2px dashed black; margin-bottom:4px;">
            <h2>min-height: 0 (default):</h2>
            <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
      </div>
      <div class="a">
            <h2>min-height: 200px and width:80%</h2>
            <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
      </div>
      <div class="b">
            <h2>min-height: 40%</h2>
            <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
      </div>
      <div class="c">
            <h2>min-height: 20px (smaller than content)</h2>
            <p>The min-height is smaller than the content, hence the property <i>min-height</i> has no effect.
               The <i>min-height</i> property in CSS is used to set the minimum height of an element.
               It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.
            </p>
      </div>
   </body>
</html>
Advertisements