jQuery returns wrong document height

Question

I'm using a Webview in Cocoa (Mac), and I'm trying to get the correct height of a document. Just doing the normal thing, webview.mainFrame.frameView.documentView.bounds.size.height seems to work fine in all cases, except one that I just found:

http://www.medium.com.

When I try doing that on this site, I get a document height of something like 500, when the real document height is more like 2000+, since I have to scroll several screens to get to the end.

I tried resorting to evaluating javascript in the webview to get the actual height, using approaches like the ones listed here: How to get height of entire document with JavaScript?

But these also gave grossly incorrect values, like my initial approach. Even going to that page, loading jQuery, then doing stuff like $(document.body).height() gives a grossly incorrect value. Anyone know what is going on? Is there some other way of getting the document height that is reliable?

I noticed that the heights reported by the inspector in chrome are getting confused also. In these screenshots, you can see the document.body height being reported as less than the height of one of its child nodes.

Answer 1

The thing with this page is the following:

The HTML and Body (and a few of the underlying elements) are all set to a 100% height, so they fit exactly in the browser-window. In my case that is about 500pixels high. How do they establish this scrolling then? Well... There is a div with a overflow:auto and the actual content is way more (around 4000px)

So you are in fact not scrolling the whole page, but this specific div (check out layout-foreground scrolling-region)

In this case it is totally correct that the height of the document is 500px, the height you are looking for can be found this way via the console:

document.querySelectorAll(".scrolling-region")[0].scrollHeight

That will give you the height of 4133px, which is, in this case, the actual height of the page.

Cheers :)

Answer 2

Looks like html,body{height:100%} and .screen-scroll,.screen-scroll>body{overflow:hidden} are messing things up for you. If you set them both to height:100% and set body to overflow:hidden then html and body will both have the same 100% height with no overflow, which will make the document height the same as the window height.

So it may be that you're actually looking for the sum of the heights of header, nav, and .background-white instead, which would be more like 4222 and not like the 500 you are getting now.

something like this:

var hh = $('header').height(),
    nh = $('nav').height(),
    bh = $('.background-white').height(),
    docHeight = hh+nh+bh;
alert(docHeight);//test

Answer 3

I think that you are getting the window.innerWidth/Height and not the entire document.

Try this out.

document.body.offsetHeight

I tried it on a random webpage and got +8000 px, that seamed to be right. My window height was only 590 (with the console open ofc).

Hope it helps.

• Molle

Answer 4

var D = document;
        var docHeight = Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );

var height1= $(window).height(),
    height= $(document).height();

Hope this helps.

Answer 5

How about wait before page loads? $(document).ready(function(){..});

I have same issue in Chrome. On one site it was necessary to adjust the height of the two columns with js. When I click F5 one of the columns has different height, fix that with $(document).ready

Answer 6

Does this happen on all browsers, or just chrome?

On 1/15, chrome updated their browser, which changed a few notable things, but one of them has to do with calculating the browser window/viewport. Here's the post, perhaps it will help: http://blogs.telerik.com/jefffritz/posts/14-01-17/chrome-updated-scrollTop

Answer 7

I too was facing the same issue. After one whole day's effort I realized that, but if I call the statement inside window.onload, it returns right height.