Understanding clientHeight, offsetHeight & scrollHeight

As you go deeper in Javascript to find the dimensions and size of a HTML element, you will come across clientHeight, offsetHeight and scrollHeight. Understanding these is a key to solving complex user interface problems.

Similar to height, there are width counterparts also - clientWidth, offsetWidth and scrollWidth. The logic that applies to height, applies to the width counterparts as well.

Starting with the CSS Box-Model

All HTML elements are basically boxes. Each one has a content area, padding area, border area and finally a margin area.

When you specify padding of an element as zero, it means its padding area occupies zero pixels. Same logic holds for border and margin.

div {
    width: 200px;
    height: 200px;
    padding: 5px;  			/* padding for all 4 sides */
    border: 5px solid red;  /* border for all 4 sides */
    margin: 10px;  			/* margin for all 4 sides */
}

In CSS when you specify width and height properties, you are basically setting the width and height of the content area. When you specify the padding property, you are setting the size of the padding area in each side (top, right, bottom & left).
Same logic holds for border and margin CSS properties.

So the total height of the element (total height of the box) = top margin area + top border area + top padding area + content area + bottom padding area + bottom border area + bottom margin area.

Similarly total width of the element = left margin area + left border area + left padding area + content area + right padding area + right border area + right margin area.

offsetHeight — Calculating How Much Space the Element Takes Up

offsetHeight gives the amount of space that an element takes up in the HTML page.

It includes the following :

• Height of the visible content (it includes the visible padding also). The hidden content due to the vertical scrollbar is not included.
• Height of the horizontal scrollbar.
• Top & bottom border.

Note that margin is not included here. Consider margin as the space that is separating the element and its neighbours, and not the space it itself occupies.

So offsetHeight = VISIBLE content & padding + border + scrollbar

clientHeight — Calculating the Height of the Visible Content

clientHeight gives the height of the visible content.

It includes the following :

• Height of the visible content (it includes the visible padding also). The hidden content due to the vertical scrollbar is not included.

We leave out the size of the horizontal scrollbar and the border because they are not actual content. Margin is also not included.

So clientHeight = VISIBLE content & padding

scrollHeight — Calculating the Total Size of the Visible / Hidden Content

scrollHeight gives you the total height of the content.

It includes the following :

• Height of the visible content (and the padding).
• Height of the the hidden content (and the padding) due to the vertical scrollbar.

We leave out border because it is not actual content. Margin is also not included.

So scrollHeight = ENTIRE content & padding (visible or hidden)

Visual Illustration

Demo 1 - No Scrollbar
The contents of the element fit within the dimensions of the element, so there is no scrollbar present

Demo 2 - With Scrollbar
The contents of the element are bigger than the given dimensions of the element, so there is both a vertical and horizontal scrollbar present.

For the source codes of the above, checkout Visual Illustration of Offset Height, Client Height & Scroll Height