CODEWITHSUNDEEP
javascripthtmlcssscrollviewport
nomæd
nomæd

Reputation: 470

scrollHeight and clientHeight inside overflow:auto/scroll are equal

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.

Upvotes: 8

Views: 5514

Answers (1)

Tomas Langkaas
Tomas Langkaas

Reputation: 4731

overflow: auto; comes 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.

Upvotes: 4

Related Questions