HTML DOM Style minHeight Property
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"> w3wiki </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"> w3wiki </h1> <h2>HTML DOM Style minHeight Property </h2> <br> <button type="button" onclick="myBeginner()"> Click to Change minHeight </button> <script> function myBeginner() { 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
Contact Us