JQuery.height () displays the same value as .scrollHeight on a div with overflow: auto (IE8)

Question

After routing on many other questions, I did not find an answer that fixes my problem.

I am writing a script to find out if a div is full. But when trying to get the visible height using jQuery.height() , jQuery.innerHeight() or JavaScripts offsetHeight . I am assigned the value of the whole div (including the part that is full) ie: the same value as scrollHeight.

Containing DIV Style:

 { overflow-x: hidden; overflow-y: auto; width: 73%; bottom: 0px; float: left; height: 100%; top: 0px; } 

I created a jsFiddle script layout: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/ (make sure the preview screen is smaller to create a scroll bar)

Answer 1

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

If you want to know the height of the content, you should use scrollHeight . This scrollHeight is a regular javascript attribute that you don't need to use jQuery

 document.getElementById("wrapper").scrollHeight; 

Or you can use jQuery selector

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

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

note that

 $('#wrapper').scrollHeight; 

returns undefined.

UPDATE

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

Take a look at this jsfiddle, this is your right, but with floating elements cleared. There you see different values ​​for scrollHeight and jQuery.height() . See that .structureContent is one that has a scrollbar, not .content nor .width100 .

.structureContent has overflow:auto , and the scroll 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 as follows:

 .content 324 for scrollHeight 324 for clientHeight 324 for jQuery.height() .structureContent 324 for scrollHeight 276 for clientHeight 276 for jQuery.height() 

Check out this great article on floating elements and clean them here: http://css-tricks.com/all-about-floats/

Answer 2

The scroll .structureContent you see is actually on the .structureContent element, not on .content . This is why .content returns all the same value. .content not truncated.

Answer 3

Now I have found a solution to my problem, although I do not quite understand why this is done.

This is not HTML and the code I wrote, and I just wrote a patch to see if a scrollbar appears. But I found that getting the ScrollHeight and Height of the container parent solves my problem. Comparing this to see if scrollHeight is greater than height, it allowed me to solve the problem.