Photoshop Question posted in
The official user guide can be found here.

Why doesn't this code return the full document height? – Photoshop

The following code should return the full height of the document, but it does not. It says the height is 1023 but (measuring by screenshots and scrolling and photoshop) the actual height is 1804. Why is it wrong? How do I get the full height?

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

EDIT I was not clear. I want document height, not window height. By “screenshots and scrolling and photoshop”, I meant I did the following:

  1. Took a screenshot and copied the window height and put in a new image
  2. Scrolled a full window height again and took a new screenshot and pasted that onto #1
  3. Continued until I couldn’t scroll anymore and pasted in the remaining height

That gave me document height.

Tags:

5

Answers


  1. 0

    If you want your page to occupy the full height of the browser window, you can add this CSS rule:

    body {
  min-height: 100vh;
}

    That tells the browser that the body should be at least as big as the viewport. Things like that work best when you’ve imposed border-box box sizing on everything:

    body {
  box-sizing: border-box;
}

body *, body *:before, body *:after {
  box-sizing: inherit;
}

    That way padding and borders won’t cause unwanted unnecessary scroll bars.

    Login or Signup to reply.
  2. 0

    What about window.innerHeight; ? That sounds like what you would be measuring in a screenshot of the browser window.

    Login or Signup to reply.
  3. 0

    There is a difference between document and window height.
    It looks like you are trying to get the window height.
    Try using window.innerHeight instead or the document heights. 🙂

    Login or Signup to reply.
  4. 0

    I think you did a mistake while copy-pasting your screens.

    I just made my own tests using following script to be sure I was scrolling one page height at a time : 

    window.onclick = function(){
        document.documentElement.scrollTop += window.innerHeight;
        }

    Results show that your function give the same height as what copy-pasting each window does.

    However, as goldfire pointed out, if you were zooming in your page, result might be different.

    Login or Signup to reply.
  5. 0

    The document itself has no height. You can only get the height of the documentElement, which is the representation of the document. All following approaches gives the same result:

    var h0 = document.documentElement.offsetHeight;
var h1 = document.documentElement.getBoundingClientRect().height;
var h2 = $(document).height();

    See working Fiddle here.
    I have tried your method with a screenshot in the following way: I opend a document much higher than the screen in Firefox, catched the whole page with FireShot (its possible without scrolling) and saved it as an image. Its pixel-height was exactly the same as what I got with h0, h1, h2 above.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search