The scrollHeight property should get back the actual height of an element, even if hidden or masked by an overflow:hidden container:


However, I’ve found that having a negative absolute position can throw this off – in one implementation (a personal proof-of-concept – all neat and tidy), I was able to remedy it with the following:

$(element).prop('scrollHeight') - $(element).position().top;

In another (live, real-world) project (neither neat nor tidy), that was failing. I couldn’t see the exact nature of the fail, and had to get it to “just work” quickly. I ended up with a rather hacky workaround, that does that job but isn’t very elegant:

var element = $('selector');
var saved = element.css('top');
element.css('top', 0);
var actualHeight = element.prop('scrollHeight');
element.css('top', saved);

All of the above notwithstanding, if the element itself is not masked by overflow (i.e., it’s parent is), then FireFox will report only the visible height. Further hackery ensues:

var element = $('selector');
var saved = element.css(['top', 'overflow', 'height']);
  top : 0,
  height : 0,
  overflow : 'scroll'
var actualHeight = element.prop('scrollHeight');
element.css('top', saved);

Here we’re setting the height to 0 and overflow to scroll – this let’s FireFox accurately determine scrollHeight since height:0 will always be smaller than the (potentially masked) container, and appropriately update the property.

Note that the line where we save the existing css properties by passing an array of property names requires jQuery 1.9+ (which will return an object of key:value pairs), otherwise you’ll have to get each one individually.

Suggestions welcome.