Javascript Reference - HTML DOM Style maxHeight Property

The max-height property controls max height for only block-level elements or elements with absolute or fixed position.

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

Browser Support


`maxHeight`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the maxHeight property:

var v = object.style.maxHeight

Set the maxHeight property:

object.style.maxHeight='none|length|%|initial|inherit'

Property Values

Value	Description
none	Default. No controls on the element height.
length	Set the maximum height in length units
%	Set the maximum height in percent of the container element
initial	Set to default value.
inherit	Inherits from parent element.

Technical Details

Default Value:	none
Return Value:	A string representing the maximum height
CSS Version	CSS2

Example

The following code shows how to set the maximum height of an element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from  www.  j  a v  a2  s .c  o  m-->
    width: 500px;
    background-color: black;
    overflow: auto;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">
  <p>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
  test<br/>test<br/>test<br/>test<br/></p>
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.maxHeight = "100px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the maximum height of an element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--  ww  w  .  j a  v  a2 s .  c  o m-->
    width: 400px;
    background-color: black;
    overflow: auto;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV" style="max-height:100px;">
  <p>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
  test<br/>test<br/>test<br/>test<br/></p>
</div>

<script>
function myFunction() {
    console.log(document.getElementById("myDIV").style.maxHeight);
}
</script>

</body>
</html>

The code above is rendered as follows: