HTML | DOM Style maxHeight Property
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"> w3wiki </ h1 > < h2 >DOM Style maxHeight Property </ h2 > < br > < button type="button" onclick="myBeginner()"> Click to change </ button > < script > function myBeginner() { // 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"> w3wiki </ h3 > < h2 >DOM Style maxHeight Property </ h2 > < br > < button type="button" onclick="myBeginner()"> Click to change </ button > </ div > < script > function myBeginner() { //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