Skip to content
Related Articles

Related Articles

HTML | DOM Style minHeight Property
  • Last Updated : 01 Aug, 2019

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:

ValueDescription
lengthDefine length in length unit.
%Define length in percentage compare to parent element
initialSet initial value that is default.
inheritInherit property from parent element.

Return value: It returns the minimum height of an element.

Example 1:






<!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:




<!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
  • Internet Explorer
  • Mozilla Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :