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">
        GeeksforGeeks
    </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:

maxWidth

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">
        GeeksforGeeks
    </h1>

    <h2>HTML DOM Style minHeight Property </h2>
    <br>

    <button type="button" onclick="myGeeks()">
        Click to Change minHeight
    </button>

    <script>
        function myGeeks() {
            document.getElementById("GFG")
                .style.minHeight = "50%";
        }
    </script>
</body>

</html>

Output:

minHeight

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

HTML DOM Style minHeight Property

Explore