In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > clientHeight

clientHeight property

Browser support:

Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin.

The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border.

If you need the total height of an element's contents, use the scrollHeight property. It returns the height of the contents with the padding, but without the scrollBar, border and the margin. In Opera, the scrollbar is also included.
Another way to get the height of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin.

You can set the height of an element with the height, pixelHeight and posHeight style properties. In that case, the value of the height contains the height of the visible contents with the horizontal scrollbar, but without the padding, border and the margin. You can get the value of the height style property in different units with these properties, not the rendered height of the element.

Note that the clientHeight property is special for the html element. It returns the height of the browser's client area without the horizontal scrollbar for any doctype. If no doctype is specified, the clientHeight property of the html element contains different values in the browsers.

Be careful about the clientHeight property of the html element!

In Internet Explorer earlier than version 8, it retrieves the height in physical pixel size, while from version 8, it returns the height in logical pixel size.

What does it mean?
If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the clientHeight property works differently from version 8 than in earlier versions.

The height is calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different.
From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the height is calculated in the current pixel size.

For example, if the zoom level is 200%, the clientHeight property retrieves two times greater values before version 8 than from version 8 for the same client window size.
If you need a cross-browser solution to get the size of the browser window, see Example 3 below.

To get the width of the document or an element in the document, use the clientWidth, offsetWidth or the scrollWidth property.

If you need the position of an element, you can use the offsetLeft, offsetTop properties and the getBoundingClientRect method.

Syntax:

object.clientHeight;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Note that the clientHeight property does not work for HTML elements whose display type is inline. There are several HTML elements (inline HTML elements), whose display type is inline by default (such as: a, span, b, img etc.). If you need to use the clientHeight property of an inline HTML element, set its display style property to 'block'.

Possible values:

Integer that represents the height of the object.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the clientHeight property:

<head>
    <style>
        #container {
            width: 350px;
            height: 150px;
            margin: 10px;
            border: 2px solid red;
            padding: 15px;
        }
    </style>
    <script type="text/javascript">
        function GetContainerSize () {
            var container = document.getElementById ("container");

            var message = "The height with padding: " + container.clientHeight + "px.\n";
            message += "The height with padding and border: " + container.offsetHeight + "px.\n";

            message += "The width width padding: " + container.clientWidth + "px.\n";
            message += "The width with padding and border: " + container.offsetWidth + "px.\n";

            alert (message);
        }
    </script>
</head>
<body>
    <div id="container">
        The width of this element is 350px<br />
        The height of this element is 150px<br />
        Furthermore, the element has the following style definitions:<br />
        margin: 10px; border: 2px solid red; padding: 15px;
    </div>
    <button onclick="GetContainerSize ();">Get the size of the container!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop properties and the onscroll event:

<head>
    <script type="text/javascript">
        function DisplayCurrentScroll () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[4].innerHTML = div.scrollLeft;
            info.rows[2].cells[4].innerHTML = div.scrollTop;
        }

        function DisplayInfo () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[1].innerHTML = div.scrollWidth;
            info.rows[2].cells[1].innerHTML = div.scrollHeight;
            info.rows[1].cells[2].innerHTML = div.clientWidth;
            info.rows[2].cells[2].innerHTML = div.clientHeight;
            info.rows[1].cells[3].innerHTML = div.scrollWidth - div.clientWidth;
            info.rows[2].cells[3].innerHTML = div.scrollHeight - div.clientHeight;

            DisplayCurrentScroll ();
        }

        function OnScrollDiv () {
            DisplayCurrentScroll ();
        }
    </script>
</head>
<body onload="DisplayInfo ()">
    <div id="scrollDiv" style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv ()">
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    <table id="info" border="1px">
        <thead>
            <tr>
                <th></th>
                <th>Total size</th>
                <th>Client size</th>
                <th>Max scroll position</th>
                <th>Current scroll position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>Horizontal</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td><b>Vertical</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows a cross-browser solution to get the size of the browser's client area in the current pixel size of the document. Try to zoom in and out (CTRL and +, CTRL and -) and refresh the page (F5).

<head>
    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetWindowSize () {
            var zoomFactor = GetZoomFactor ();
            var w = Math.round (document.documentElement.clientWidth / zoomFactor);
            var h = Math.round (document.documentElement.clientHeight / zoomFactor);

            var info = document.getElementById ("info");
            info.innerHTML = w + "px * " + h + "px";
        }
    </script>
</head>
<body onload="GetWindowSize ()">
    Size of the browser's client area:
    <span id="info" style="margin-left:20px;"></span>
    <div style="width:500px; height:1000px; background-color:#e0a0a0;">Size of this element: 500px * 1000px</div>
</body>