The minHeight property in HTML DOM is used to set or return the minimum height of an element. This property affects only on block-level elements, absolute or fixed position elements.
Syntax:
- It returns the minHeight property.
object.style.minHeight- It is used to set the minHeight Property.
object.style.minHeight = "length | % | initial | inherit"Property Value:
| Value | Description |
|---|---|
| length | Define length in length unit. |
| % | Define length in percentage compare to parent element |
| initial | Set initial value that is default. |
| inherit | Inherit property from parent element. |
Return value: It returns the minimum height of an element.
Example 1:
html
<!DOCTYPE html><html>
<head>
<title>
HTML DOM Style minHeight Property
</title>
<style>
#GFG {
color: white;
width: 50%;
background: green;
margin: auto;
}
</style>
</head>
<body style="text-align: center;">
<h1 id="GFG">
GeeksforGeeks
</h1>
<h2>HTML DOM Style minHeight Property</h2>
<br>
<button type="button" onclick="myFunc()">
Click to Change minHeight
</button>
<script>
function myFunc() {
document.getElementById("GFG")
.style.minHeight = "150px";
}
</script>
</body>
</html>
|
Output:
Example 2:
html
<!DOCTYPE html><html>
<head>
<title>
HTML DOM Style minHeight Property
</title>
<style>
#GFG {
color: white;
width: 50%;
background: green;
margin: auto;
}
#Geek_Center {
height: 200px;
}
</style>
</head>
<body style="text-align: center;" id="Geek_Center">
<h1 id="GFG">
GeeksforGeeks
</h1>
<h2>HTML DOM Style minHeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to Change minHeight
</button>
<script>
function myGeeks() {
document.getElementById("GFG")
.style.minHeight = "50%";
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by DOM Style minHeight property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 7
- Mozilla Firefox 3
- Opera 4
- Safari 1.3