HTML - DOM Style Object maxHeight Property

Quiz

HTML DOM Style Object maxHeight property sets or returns the maximum height of an element. It only affects block-level elements or elements with fixed or absolute positioning.

Syntax

Set the maxHeight property:

object.style.maxHeight= "none | length | percentage | initial | inherit";

Get the maxHeight property:

object.style.maxHeight;

Property Values

Value	Description
none	It is the default value which does not set any limit on maximum height.
length	It specifies maximum height of element in length units.
percentage	It specifies maximum height in percentage of the parent element
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return value

It returns a string value which represents max height of an element.

Examples of HTML DOM Style Object 'maxHeight' Property

The following examples illustrates to set maximum height of div element.

Set Max height of div Element

The following example sets maximum height of div element using length property value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object maxHeight Property
    </title>
    <style>
        #margin {
            border: 2px solid #04af2f;
            overflow: auto;
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h3>
        Click to set maximum height.
    </h3>
    <button onclick="fun()">
        Set Max Height
    </button>
    <br>
    <div id="margin">
        <p>
            CSS is the acronym for "Cascading 
            Style Sheet". It's a style sheet 
            language used for describing the 
            presentation of a document written 
            in a markup language like HTML. 
        </p>
        <p>
            CSS helps the web developers to 
            control the layout and other visual 
            aspects of the web pages. CSS plays 
            a crucial role in modern web development 
            by providing the tools necessary to 
            create visually appealing, accessible,
            and responsive websites.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("margin")
                .style.maxHeight = "100px";
        }
    </script>
</body>
</html>

Set Max height using Percentage

The following example sets maximum height of child div element using percentage value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object maxHeight Property
    </title>
    <style>
        #margin {
            border: 2px solid #04af2f;
            overflow: auto;
            width: 400px;
            height: 200px;
        }
        #height {
            margin: 10px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h3>
        Click to set maximum height.
    </h3>
    <button onclick="fun()">
        Set Max Height
    </button>
    <br>
    <div id="margin">
        <div id="height">
            <p>
                CSS is the acronym for "Cascading
                Style Sheet". It's a style sheet
                language used for describing the
                presentation of a document written
                in a markup language like HTML.
            </p>
            <p>
                CSS helps the web developers to
                control the layout and other visual
                aspects of the web pages. CSS plays
                a crucial role in modern web development
                by providing the tools necessary to
                create visually appealing, accessible,
                and responsive websites.
            </p>
        </div>
    </div>
    <script>
        function fun() {
            document.getElementById("height")
                .style.maxHeight = "40%";
        }
    </script>
</body>
</html>

Supported Browsers

Property
maxHeight	Yes 18	Yes 12	Yes 1	Yes 1.3	Yes 7

html_dom.htm

Print Page