maxHeight Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:maxHeight

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. maxHeight

Description

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

Property Values

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

Technical Details

Item Value
Default Value: none
Return Value: A String, representing the maximum height of an element
CSS VersionCSS2

Set the maximum height of a <div> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from   w  ww .j av  a2 s  . c  o m
    width: 500px;
    background-color: lightblue;
    overflow: auto;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="myDIV" style="max-height:100px;">
  <p>test</p>

  <p>test</p>

  <p>test</p>
</div>

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

</body>
</html>

Related Tutorials