Question

176

jQuery .height() outputting same value as .scrollHeight on div with overflow:auto (IE8)

rated 0 times [ 177] [ 1] / answers: 1 / hits: 41590 / 10 Years ago, mon, september 1, 2014, 12:00:00

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() or JavaScripts offsetHeight. I am given the value of the whole div (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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvingcarloe

Add To Favorites

Follow

Total Points: 677

Total Questions: 109

Total Answers: 96

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

irvingcarloe questions

1 Is it better to use multiple states or one state object in React?

Wed, Aug 10, 22, 00:00, 2 Years ago

1 Tailwind classes not working after page refresh in production

Fri, Jun 4, 21, 00:00, 3 Years ago

1 Event listener for dataLayer push events on Tag Manager JS

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Convert file to Base64

Tue, Aug 4, 20, 00:00, 4 Years ago

1 How to autoplay audio in any browser?

Fri, Jul 3, 20, 00:00, 4 Years ago

View All

answered 10 Years ago julian · Accepted Answer

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: '020';

  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/