jQuery document height wrong when developer tools is open

Question

When using $ (document ) . height() to get the document height, an issue is present when developer tools are initially open.

The height will be too low, such that when developer tools are closed, the height returned by jQuery does not cover the full document height.

What can be done to work around this issue so that when developer tools are open and the document is opened, the height is correct?

the height is correct, you just want a different information. do you want the height the whole body has? — Alex, Feb 09 '15 at 15:22
I don't think it's possible without binding the resize event, and retrieving the height each time it fires — billyonecan, Feb 09 '15 at 15:28

score 2 · Answer 1 · answered Feb 09 '15 at 15:25

Appearently the document height is not what you want. Look for the whole body height instead:

$('body').prop('scrollHeight')

Another idea would be to move the dev tools into another window, but the document does change depending on whether the dev tools are opened or closed.

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

Here is the link why is $(window).height() so wrong? might you can look. try something like this,

$(window).on('resize',function() { 
  $('#res').html("new height is: "+$(window).height()); 
});

<span id="res"></span>

Make sure DOCTYPE declaration in your HTML page, http://viralpatel.net/blogs/jquery-window-height-incorrect/, such as

<!DOCTYPE html>

edited May 23 '17 at 11:56

Community

1
1

answered Feb 09 '15 at 15:30

Lumi Lu

3,289
1
11
21

score 1 · Answer 3 · answered Apr 03 '18 at 15:18

window.innerHeight is the property you're looking for.

For example, this code detects whether all the document content is in view; irrespective of whether Dev Tools is open:

var scrolled_to_all = false;

if($(document).height() <= window.innerHeight) {
    scrolled_to_all = true;
}

jQuery document height wrong when developer tools is open

3 Answers3