Open In App

HTML | DOM Style maxHeight Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads