Skip to content
Related Articles

Related Articles

HTML | DOM Style minHeight Property

Improve Article
Save Article
  • Last Updated : 08 Jul, 2022
Improve Article
Save Article

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>
            DOM Style minHeight Property
        </title>
         
        <style>
            #Geek1 {
                color: white;
                width: 50%;
                background: green;
            }
        </style>
    </head>
     
     
    <body>
        <center>
            <h1 id = "Geek1">
                GeeksForGeeks
            </h1>
             
            <h2>DOM Style minHeight Property </h2>        
            <br>
            <button type = "button" onclick = "geeks()">
                Click to change
            </button>
             
            <script>
                function geeks() {
                    document.getElementById("Geek1").style.minHeight
                            = "150px";
                }
            </script>
        </center>
    </body>
</html>                            


Output:

  • Before click on the button:

 

  • After click on the button:

 

Example 2: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Style minHeight Property
        </title>
         
        <style>
            #Geek1 {
                color: white;
                width: 50%;
                background: green;
            }
            #Geek_Center {
                background: yellow;
                height: 200px;
            }
        </style>
    </head>
     
    <body>
        <center id = "Geek_Center">
         
            <h1 id = "Geek1">
                GeeksForGeeks
            </h1>
             
            <h2>DOM Style minHeight Property </h2>        
            <br>
            <button type = "button" onclick = "geeks()">
                Click to change
            </button>
             
            <script>
                function geeks() {
                    document.getElementById("Geek1").style.minHeight
                            = "50%";
                }
            </script>
        </center>
    </body>
</html>                                


Output:

  • Before click on the button: 

  • After click on the button:

 

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!