CSS - max-height



The max-height property is used to set an upper bound on the height of an element.

Possible Values

  • none − There is no limit to the height of the element.

  • <length> − Any length unit. The element can never have a value for height which exceeds this distance.

  • <percentage> − Limits the element's height to be at most this percentage of the height of the containing block.

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

  • inherit − The value of max-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.maxHeight = "50px"

CSS max-height - <length> value

The following example demonstrates max-height: 40px property sets the maximum height of an element to 40px −

<html>
<head>
<style>
   p {
      width:400px;
      max-height:40px;
      border:2px solid red;
      padding:5px;
      margin:10px;
   }
</style>
</head>
<body>
   <p>
      This paragraph is 400px wide and maximum height is 40px.
      Hence the border is not covering the entire text and
      there is some part of text outside the border. This is
      due to the max-height value set for p tag.
   </p>
</body>
</html>

CSS max-height - <percentage> value

Here is another example demonstrating use of all values in max-height

<html>
<head>
<style>
   div.a {
      max-height: 100px;
      width: 80%;
      overflow: auto;
   }
   div.b {
      max-height: 70%;
      width: 80%;
      overflow: auto;
   }
   div.c {
      max-height: inherit;
      width: 80%;
      overflow: auto;
   }
   div.d {
      max-height: none;
      width: 80%;
      overflow: auto;
   }
</style>
</head>
<body>
   <div class="a">
         <h2>max-height: 100px and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 100px.</p>
   </div>
   <div class="b">
         <h2>max-height: 70% and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 70%.</p>
   </div>
   <div class="c">
         <h2>max-height: inherit and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is inherit.</p>
   </div>
   <div class="d">
         <h2>max-height: none and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is none.</p>
   </div>
</body>
 </html>
Advertisements