Javascript DOM CSS Style maxHeight Property

Introduction

Set the maximum height of a <div> element: 

document.getElementById("myDIV").style.maxHeight = "15px";

Click the button to make sure that the DIV element's height never gets bigger than 100 pixels:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from  w  w w .  jav  a  2s .co  m
  width: 500px;
  background-color: lightblue;
  overflow: auto;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <p>This DIV element does not have a pre-defined height.</p>

  <p>The height of this DIV element depends on its content.</p>

  <p>But if you click the "Test" button, you will make sure that this 
  DIV element does not exceed 100 pixels in height.</p>
</div>

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

</body>
</html>

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

The maxHeight property has effect only on block-level elements or on elements with absolute or fixed position.

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

Property Values

Value Description
noneNo limit on the height. default
length Sets the maximum height in length units
% Sets the maximum height in % of the parent element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The maxHeight property returns a String representing the maximum height of an element.




PreviousNext

Related