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