CSS Height property

The height property is used to specify the height of the content area of an element. The value of the height property is in px, cm, em or in percentage. We can also set the value or height in auto, where the browser will calculate the height of an element. Now lets see an Example :
<html>
<head>
  <style>
    div {
      border: 2px solid;
      }
    .div1 {
      height: auto;
    }
    .div2 {
      height: 50px;
    }
  </style>
</head>
<body>
  <h3>height: auto</h3>
  <div class="div1">A computer is a device that can be instructed to carry out sequences of 
   arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.
  </div>
  <h3>height: 50px</h3>
  <div class="div2">A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.</div>
</body>
</html>
Output :

height: auto
A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.

height: 50px
A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.

There are some variants of height property :

max-height : The max-height property specifies the maximum height of the content area of an element.
 max-height: 200px;
min-height : The min-height property specifies the minimum height of the content area of an element.
 min-height: 100px;

Next Topic :