jQuery .height() outputting same value as .scrollHeight on div with overflow:auto (IE8)
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
324 for scrollHeight
324 for clientHeight
324 for jQuery.height()
.structureContent
324 for scrollHeight
276 for clientHeight
276 for jQuery.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.
Luke Turnbull
Luke, 23. First Class Honours Web Systems Design Graduate. Experienced in SEO, Graphic/Web Design, Front-End Development, Back-end Development and Databases. Currently working as a Software Engineer.
Updated on July 09, 2022Comments
-
Luke Turnbull almost 2 years
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 retrieve the visible height with
jQuery.height()
,jQuery.innerHeight()
orJavaScripts offsetHeight
. I am given the value of the wholediv
(Including the part which is overflowing) i.e: the same value as scrollHeight.The containing DIVs style:
{ overflow-x: hidden; overflow-y: auto; width: 73%; bottom: 0px; float: left; height: 100%; top: 0px; }
I've created a mock up of the scenario on jsFiddle: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/ (Make sure to make the preview screen smaller to create the scroll bar)
-
Luke Turnbull over 9 yearsAh, sorry. I seem to of got confused. I have tried all of the following scrollHeight methods you have shown and they are returning the same value as .height() ext..
-
Carlos Calla over 9 yearsdid you tried the jsfiddle I gave your? open console and see the values they return, scrollHeight returns different value than height
-
Luke Turnbull over 9 yearsYeah that works fine, it just doesn't seem to work on my specific div.
-
Carlos Calla over 9 yearsCan you add a jsfiddle with your scenario so I can give you better help please?
-
Luke Turnbull over 9 yearsThis mock up recreates the problem: jsfiddle.net/Lukedturnbull/L2bxmszv/3
-
Carlos Calla over 9 yearsSee my update. With your jsfiddle example I could know the reason for the failure in your case.
-
Carlos Calla over 9 years@LukeTurnbull see the explanation of the solution of your problem in my answer update
-
Luke Turnbull over 9 yearsCheers man, unfortunately I can't really touch any of the HTML elements as it may mess other pages up! But thanks for the information, It's working now! Thanks a lot.
-
Carlos Calla over 9 yearsIf you can add a class in the CSS file, then add the class and without changing the HTML you can add the class to your element by Javascript using
$('.structureContent').addClass('clearfix');
. You can solve it like this. -
Carlos Calla over 9 yearsLuke in this case, since
.structureContent
is the one with the scrollbar and there is a trick to clear floating elements withoverflow:auto
you don't need to add the classclearfix
. If you want, for example, to get the height of.width100
then you need it because right now it has height 0, if you clear it you will get 324.