I know that there are hundreds of questions about scrollHeight and clientHeight, but I didn't see one that answered my question so here it is:

I have a page with html,body height of 100%, and in the body a container DIV that is also stretched to the entirety of the document height. This container has overflow.

Inside of the container, there are two DIVs side by side (float left and right) and they are being scrolled inside of the container DIV.

This came up as I was trying to figure out what is the visible height of the divs inside of the scroll area. I assumed that clientHeight is the actual visible part, but apparently this is not the case.

What is the explanation, and how would I go about getting the height of the inner DIVs as they are displayed in the browser, without explicitly taking the height of the parent DIV?

Here's the piece of layout/code I was playing with: CodePen:

This is the layout:

<div id="container"> <!-- height: 100%, overflow: auto -->
  <div id="left-div"> <!-- float:left -->
    <div class="content">....lots of content....</div>
  </div>
  <div id="right-div"> <!-- float:right -->
    <div class="content">....lots of content....</div>
  </div>
</div>

Thanks.

I know that there are hundreds of questions about scrollHeight and clientHeight, but I didn't see one that answered my question so here it is:

I have a page with html,body height of 100%, and in the body a container DIV that is also stretched to the entirety of the document height. This container has overflow.

Inside of the container, there are two DIVs side by side (float left and right) and they are being scrolled inside of the container DIV.

This came up as I was trying to figure out what is the visible height of the divs inside of the scroll area. I assumed that clientHeight is the actual visible part, but apparently this is not the case.

What is the explanation, and how would I go about getting the height of the inner DIVs as they are displayed in the browser, without explicitly taking the height of the parent DIV?

Here's the piece of layout/code I was playing with: CodePen: http://codepen.io/nomaed/pen/qaqRgv

This is the layout:

<div id="container"> <!-- height: 100%, overflow: auto -->
  <div id="left-div"> <!-- float:left -->
    <div class="content">....lots of content....</div>
  </div>
  <div id="right-div"> <!-- float:right -->
    <div class="content">....lots of content....</div>
  </div>
</div>

Thanks.

• javascript
• html
• css
• scroll
• viewport

Share Improve this question Follow edited Sep 20, 2016 at 21:35 Alex Cushing 28611 silver badge1717 bronze badges asked Sep 20, 2016 at 19:17 nomædnomæd 47055 silver badges1313 bronze badges 1

• Add height: 100% to left-div (remove overflow:hidden, no idea why u put it there) then clientHeight is correct. – Bojidar Stanchev Commented Oct 25, 2019 at 15:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

overflow: auto; es into effect when a block element contains more than its available space, that is, when its height is limited. In your example, this effects #container, which gets scrollbars because the children #left-div and #right-div takes up lots of space. When this is the case, the value of scrollHeight and clientHeight will differ, as is the case for #container.

However, #left-div and #right-div do not have height limitations nor scrollbars themselves, which makes their actual height—clientHeight—to equal their scrollHeight. The fact that they are not fully visible, is because of the height limitation and overflow: auto of their parent, #container.

I assumed that clientHeight is the actual visible part, but apparently this is not the case.

The visible height of #left-div and #right-div is restricted by the visible height of #container, which you only get from #container.clientHeight.

For more info on this, check MDN: Determining the dimensions of elements, where you can read more about clientHeight and scrollHeight.