Easy Tutorial
❮ Prop Number Disabled Prop Win Parent ❯

maxHeight Property


Definition and Usage

The maxHeight property sets or returns the maximum height of an element.

The maxHeight property only works on block-level elements or elements with absolute/fixed positioning.

Note: The height of an element can never be greater than the value specified by the maxHeight property.

Syntax

Setting the maxHeight property:

Returning the maxHeight property:

Value Description
none Default. The element has no height limit.
length Defines the maximum height using units like px, cm, etc.
% Defines the maximum height as a percentage of the parent element.
inherit The value of the maxHeight property is inherited from the parent element.

Browser Support

All major browsers support the maxHeight property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if !DOCTYPE is specified. IE9 supports "inherit".


Example

Setting the maximum height of an element:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function displayResult(){
    document.getElementById("p1").style.maxHeight="15px";
}
</script>
</head>
<body>

<p style="background:red;" id="p1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<input type="button" onclick="displayResult()" value="Set the maximum height of the element">

</body>
</html>

❮ Prop Number Disabled Prop Win Parent ❯