Jquery .height() Outputting Same Value As .scrollheight On Div With Overflow:auto (ie8)

After routing around many other questions I have not found an answer that fixes my problem. I am writing a script to find out whether the div is overflowing. But when trying to ret

Solution 1:

Everything seems fine, jQuery.height() and jQuery.innerHeight() has nothing to do with the overflow property. They will return heights, not just the visible part.

If you want to know the content height you have to use scrollHeight. This scrollHeight is a regular javascript property you don't have to use jQuery

document.getElementById("wrapper").scrollHeight;

Or you can use jQuery selector

$('#wrapper')[0].scrollHeight;

See the working jsfiddle: http://jsfiddle.net/scgz7an5/1/

Notice that

$('#wrapper').scrollHeight;

returns undefined.

UPDATE

You forgot the most important part of floating elements. You forgot to clear them.

Take a look at this jsfiddle, is an edit of yours but with floating elements cleared. There you see different values for scrollHeight and jQuery.height(). See that .structureContent is the one that has the scroll bar, not .content neither .width100.

.structureContent has overflow:auto and the scrollbar you see comes from it.

http://jsfiddle.net/L2bxmszv/5/

I added this class to clear your floating elements.

.clearfix:before,
.clearfix:after, {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {
  clear: both; }
.clearfix {
  zoom: 1; }

The output was this:

.content
324forscrollHeight324forclientHeight324forjQuery.height()
.structureContent
324forscrollHeight276forclientHeight276forjQuery.height()

See a great article about floating elements and clearing them here: http://css-tricks.com/all-about-floats/

Solution 2:

The scrollbar you are seeing is actually on the .structureContent element and not on .content. This is why .content returns all the same value. .content isn't truncated.

Solution 3:

I have now found a solution for my problem, although I do not fully understand why it is doing this.

This isn't HTML and code I have written and I was simply writing a fix to see if the scroll bar appears. But i found that getting the ScrollHeight and Height of the parent of the container solved my problem. Comparing to see if the scrollHeight is greater than the height allowed me to solve the issue.