ADVERTISEMENT
ADVERTISEMENT

CSS min-height Property

Learn about the CSS min-height Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on March 20, 2022

As you all know that we can set the height of an element in CSS using the height property. We can apply two more properties that somewhat serve the same purpose. We define a max-height property to specify the maximum height and min-height property to specify the minimum height.

What is CSS min-height Property?

As the name suggests, the min-height property specifies the minimum height of an element. If the property value set by the user is larger than the content, the minimum height will be applied. The min-height property overrides the height property. The default value is 0.

Syntax:

min-height: 0|%| length| initial| inherit;

Quick overview of the syntax used,

Value Explanation
0 This is the default value.
% Specifies minimum height in terms of per cent of the containing block's height.
length Specifies minimum height in units of length (m, cm, px, pt., etc.).
initial Sets min-height property to its default value.
inherit The same value of the min-height property as set in the container (parent) class.

The example given below illustrates CSS min-height Property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>minheight</title>
   </head>
   
   <style>
      * {
      margin-right: 100px;
      }
      #m1 {
      border: 2px solid lightsalmon;
      background-color: teal;
      min-height: 64px;
      }
      #m2 {
      border: 2px solid grey;
      background-color: teal;
      }
   </style>
   
   <body>
      <div class="container">
         <h2 class="main" id="m1">This element has min-height property</h2>
         <h2 class="main" id="m2">This element has no min-height property</h2>
      </div>
   </body>
</html>

Output:

CSS min-height Property | Example 1

We have created the main class with m1 id and m2 id. The min-height property targets only m1 id elements. The property value is set to 64px.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>minheight2</title>
   </head>
   
   <style>
      .first,
      th,
      tr,
      td {
      border: 2px solid black;
      background-color: aliceblue;
      padding-left: 20px;
      min-height: 20vw;
      }
   </style>
   
   <body>
      <div class="first">
         <h2> Web Development</h2>
         <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JAVASCRIPT</li>
         </ul>
         <table class="table1">
            <tr>
               <td>Name</td>
               <td>age</td>
            </tr>
            <tr>
               <th>Rahul</th>
               <th>17</th>
            </tr>
         </table>
      </div>
   </body>
</html>

Output: Before applying min-height property:

CSS min-height Property | Example 2

Output: After applying min-height property:

CSS min-height Property | Example 3

In this code, the min-height property targets all the elements of first class. The height of the first class elements is increased. The property value is set to 20vw, which defines the minimum height in viewport width.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.