CSS Property max-height








max-height sets a maximum constraint on the height of the element.

Summary

ItemValue
Initial value none
Inherited No.
Version CSS2
JavaScript syntax object.style.maxHeight="10px"
Applies to All elements except inline nonreplaced elements and table elements.




CSS Syntax

max-height: length | percentage | inherit 

Property Values

The property values are listed in the following table.

ValueDescription
auto Default value. The browser does the calculation.
length Set width in px, cm, etc.
% Set width in percent of the containing element
inherit Inherit the width property from the parent element

Browser compatibility

max-height Yes Yes Yes Yes Yes




Example

An example showing how to use max-height CSS property.

<!DOCTYPE HTML>
<html>
     <head>
         <style>
  p {<!-- w  w  w  . ja v  a  2 s. co m-->
      padding: 10px;
      margin: 10px;
      border:  1px solid black;
      background: lightgray;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      max-height: 200px;
  }
         </style>
     </head>
     <body>
<p>
             this is a test. this is a test. 
             this is a test. this is a test. 
             this is a test. this is a test. 
             this is a test. this is a test. 
             this is a test. this is a test. 
             this is a test. this is a test. 
             this is a test. this is a test. 
             this is a test. this is a test. 
</p>
     </body>
 </html>

Click to view the demo