CSS - min-height Property

Quiz

CSS min-height property specifies the minimum height of an element. It ensures that the element cannot be smaller than the defined value, regardless of its content. If the content exceeds the specified minimum height, the element will grow to fit the content.

Syntax

min-height: length | percentage | initial | inherit;

Property Values

Value	Description
length	The minimum height of an element is set using length units (e.g. px, em, rem etc.). Default is 0.
percentage	The minimum height of an element is set using percentage values (e.g. 10%) relative to the size of the container.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Min Height Property

The following examples explain the min-height property with different values.

Min Height Property with Length Values

To set the minimum limit on the height of an element, we can specify the minimum height value using length units (e.g. px, em, rem etc.). If the content is smaller than the min-height, the effect is visible. If the content is greater than the min-height, the element grows to fit the content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
      <style>
            .container {
                  padding: 5px;
                  background-color: lightgreen;
            }

            .ex1 {
                  min-height: 120px;
            }

            .ex2 {
                  min-height: 2em;
            }
      </style>
</head>
<body>
      <h2>
            CSS min-height property
      </h2>
      <h4>
            min-height: 120px (the minimum height is 
            135px, the content is smaller than the 
            min-height so space is visible. )
      </h4>
      <div class="container ex1">
            TutorialsPoint is an online platform offering free 
            tutorials and resources on various topics including 
            programming, web development, and data science. It 
            provides structured lessons, examples, and quizzes 
            for effective learning.
      </div>
      <br/>
      <h4>
            min-height: 2em (the minimum height is 2em, 
            in the following example content is greater 
            than the defined height, so the box grows in size)
      </h4>
      <div class="container ex2">
            TutorialsPoint is an online platform offering free 
            tutorials and resources on various topics including 
            programming, web development, and data science. It 
            provides structured lessons, examples, and quizzes 
            for effective learning.
      </div>
</body>
</html>

Min Height Property with Percentage Values

To set the minimum limit on the height of an element, we can specify the minimum height value using percentage values (e.g. 10%) relative to the size of the containing element. If the content is smaller than min-height, the space is visible. If the content is larger than the min-height, the element grows to accomodate the content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
      <style>
            .outer-container {
                  height: 100px;
                  padding: 5px;
            }

            .inner-container {
                  width: 100%;
                  height: 100%;
                  position: relative;

            }

            .color {
                  background-color: lightgreen;
            }

            .ex1 {
                  min-height: 55%;
            }

            .ex2 {
                  min-height: 105%;
            }
      </style>
</head>
<body>
      <h2>
            CSS min-height property
      </h2>
      <h4>
            min-height: 55% (the minimum height is 55% 
            of the inner-container's height, as the content 
            is larger than the min-height in this case, 
            the box grows)
      </h4>
      <div class="outer-container">
            <div class="inner-container">
                  <div class="ex1 color">
                  TutorialsPoint is an online platform offering 
                  free tutorials and resources on various topics 
                  including programming, web development, and data
                  science. It provides structured lessons, 
                  examples, and quizzes for effective learning.
                  </div>
            </div>
      </div>
      <br/>
      <h4>
            min-height: 115% (the minimum height is 115% 
            of the inner-container's height, the content 
            is smaller than the min-height so there is space.)
      </h4>
      <div class="outer-container">
            <div class="inner-container">
                  <div class="ex2 color">
                  TutorialsPoint is an online platform offering 
                  free tutorials and resources on various topics 
                  including programming, web development, and data
                  science. It provides structured lessons, 
                  examples, and quizzes for effective learning.
                  </div>
            </div>
      </div>
</body>
</html>

Supported Browsers

Property
min-height	1.0	7.0	3.0	2.0.2	4.0

css_reference.htm

Print Page