What Is Offsetheight, Clientheight, Scrollheight

What is offsetHeight, clientHeight, scrollHeight?

To know the difference you have to understand the box model, but basically:

clientHeight:

returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin

offsetHeight:

is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

scrollHeight:

is a measurement of the height of an element's content including content not visible on the screen due to overflow

I will make it easier:

Consider:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>

scrollHeight: ENTIRE content & padding (visible or not)

_{Height of all content + paddings, despite of height of the element.}

clientHeight: VISIBLE content & padding

_{Only visible height: content portion limited by explicitly defined height of the element.}

offsetHeight: VISIBLE content & padding + border + scrollbar

_{Height occupied by the element on document.}

scrollHeight
clientHeight and offsetHeight

offsetHeight, clientHeight and scrollHeight does not give the correct height

After many tests I've figured it out. The solution is to use getComputedStyle(item).getPropertyValue('height').

In the below example the first one is untouched and the second one set the height with the above.

window.addEventListener('DOMContentLoaded', (event) => {  let items4 = document.querySelectorAll('.section4 div');    items4.forEach((item) => {        item.style.height = getComputedStyle(item).getPropertyValue('height');  });});

.div1 {  border: 5px solid #fff;  padding: .5rem;  margin: .5rem;  box-sizing: border-box; }  .div2 {  border: 5px solid #fff;  padding: .5rem;  margin: .5rem; }  .div3 {  padding: .5rem;  margin: .5rem;  box-sizing: border-box; }  .div4 {  padding: .5rem;  margin: .5rem;   }  .div5 { }  div[class^=div] {   background: #eee;   outline: 1px solid red; }  body {   display: flex; }  section {   background: #f5f5f5;   margin: .5rem;   width: 100px; }

<section class="correct">  <div class="div1">Some<br>text</div>  <div class="div2">Some<br>text</div>  <div class="div3">Some<br>text</div>  <div class="div4">Some<br>text</div>  <div class="div5">Some<br>text</div></section>
<section class="section4">  <div class="div1">Some<br>text</div>  <div class="div2">Not too<br>High =)</div>  <div class="div3">Some<br>text</div>  <div class="div4">Not too<br>high =)</div>  <div class="div5">Some<br>text</div></section>

offsetHeight / clientHeight / scrollHeight never change

I believe that the problem is that you're expecting scrollHeight, offsetHeight, and clientHeight to change based on the windows size which in fact this is not the case.

The scrollHeight is "a measurement of the height of an element's content including content not visible on the screen due to overflow" (reference).

The offsetHeight is "the height of the element including vertical padding and borders, in pixels, as an integer" (reference).

The clientHeight is "the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin"(reference).

All three of these are relative to the element for which they are called on. Since it doesn't seem like you have set a relative height for the elements, you will not see any change to their scrollHeight, offsetHeight, or clientHeight. In other words, the elements currently have fixed heights based on the content within them.

You can see this when you make the screen so small that the 'click me' goes across two lines, then your values change.

What is the difference between offsetHeight and scrollHeight of an element in DOM?

HTMLElement.offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
HTMLElement.scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow. The value returned by HTMLElement.scrollHeight WILL include the padding-top and padding-bottom, but will NOT include the element borders or the element horizontal scrollbar.

This page and this page are my sources.

The MDN documentation also provides images to demonstrate.

What Is Offsetheight, Clientheight, Scrollheight