The maxHeight property set/return the maximum height of an element. The maxHeight property affect only on block-level elements, absolute or fixed position elements.
Syntax:
- It is used to set the maxHeight property:
object.style.maxHeight = "none|length|%|initial|inherit"
- It is used to return the maxHeight property:
object.style.maxHeight
Return Values:It returns a string, represents the maximum height of an element
Property Values
- none: It is the default value and does not contain max-height. It is synonymous to no maximum height specification.
- length: This property is used to define the max-height in length. The length can be set using px, em etc.
- %: This property is used to define the max-height in %.
- initial: This property is used to set the value of the max_height to its default value.
- inherit : This property is inherited from its parent.
Example-1: Set the maximum height of element using length unit.
html
<!DOCTYPE html><html>
<head>
<title>DOM Style maxHeight Property </title>
</head>
<style>
#Geek1 {
color: white;
height: 100px;
background: green;
}
</style>
<body>
<center>
<h1 id="Geek1">
GeeksForGeeks
</h1>
<h2>DOM Style maxHeight Property </h2>
<br>
<button type="button" onclick="mygeeks()">
Click to change
</button>
<script>
function mygeeks() {
// Set maximum height using
// Using length unit.
document.getElementById(
"Geek1").style.maxHeight =
"40px";
}
</script>
</center>
</body>
</html>
|
Output
- Before click on the button:
- After click on button:
Example-2: Set maximum height using “%”
html
<!DOCTYPE html><html>
<head>
<title>DOM Style maxHeight Property </title>
</head>
<style>
#Geek1 {
color: white;
height: 50%;
background: green;
}
#Geek_Center {
background: yellow;
width: 400px;
height: 150px;
margin-left: 150px;
text-align: center;
}
</style>
<body>
<div id="Geek_Center">
<h3 id="Geek1">
GeeksForGeeks
</h3>
<h2>DOM Style maxHeight Property </h2>
<br>
<button type="button" onclick="mygeeks()">
Click to change
</button>
</div>
<script>
function mygeeks() {
//set maximum height.
document.getElementById(
"Geek1").style.maxHeight = "35%";
}
</script>
</body>
</html>
|
Output
- Before click on the button:
- After click on button:
Supported Browsers: The browser supported by HTML | DOM Style maxHeight Property>are listed below:
- Google Chrome 18
- Edge 12
- Internet Explorer 7
- Mozilla Firefox 1
- Opera 7
- Safari 1.3