67

I am executing the following Javascript on my browser (Firefox).

  1. console.debug("Screen height = "+ screen.availHeight); //outputs 770

  2. console.debug("Window Height ="+ $(window).height()); //outputs 210 (I am using jQuery as well)

What is the difference between the two? Is 770 in pixels and 210 in mm?

Similarly, when I write $(document).height() and $(window).height(), there is a difference. What is the reason?

180

window.outerHeight

It's the height of the window on screen, it includes the page and all the visible browser's bars (location, status, bookmarks, window title, borders, …).

This not the same as jQuery's $(window).outerHeight().

window.innerHeight or $(window).height()

It's the height of the viewport that shows the website, just the content, no browser's bars.

document.body.clientHeight or $(document).height()

It's the height of your document shown in the viewport. If it is higher than $(window).height() you get the scrollbars to scroll the document.

screen.availHeight

It's the height the browser's window can have if it is maximized, including the browser's bars. So when the window is maximized, screen.availHeight === window.outerHeight

screen.height

It simply matches the screen's resolution. So on a 1920×1080 screen, screen.height will be 1080.

screen.availHeight is equal to [screen.height + the operating system's bars], like the taskbar on Windows, the dock and menu on OS X, or whatever is fixed on top or bottom of your screen if you're using Linux.

10
  • I agree with your answer but then what is $(window).height() and why this value is different than screen.availHeight. I have already googled a lot over that but still no satisfactory answer. Further I see no documentation available which can tell the actual concept. By the way thanks for a super quick response. Thanks a lot again .
    – Akshay
    Jun 15 '10 at 11:04
  • I've added an image to show the differences, I hope this will help.
    – jigfox
    Jun 15 '10 at 11:27
  • @jigfox: its helps really. but how to calculate height when we re-sized window and then when we refresh window, screen.height only gives you inner height not including scroll height. how can we calculate scroll height? where as screen.availHeight gives you scroll height but it includes toolbar menu all this things.
    – Raje
    Oct 4 '11 at 10:49
  • 2
    it seems that Windows with Aero considers the full screen.height to be the same as screen.availHeight due to the transparency, how would I go about getting the screen.availHeight on a Windows Aero transparent taskbar system?
    – wolle
    Oct 5 '12 at 3:13
  • 3
    $(window).height() is only accurate on webkit. On IE and Firefox, horizontal scroll bars are not accounted for, so your results are off by the height of the scroll bar. Apr 23 '13 at 14:32
1

Wanted to correct a thing stated in @jigfox 's answer:

https://www.w3schools.com/jsref/prop_screen_availheight.asp#:~:text=The%20availHeight%20property%20returns%20the,)%2C%20use%20the%20availWidth%20property.

The availHeight property returns the height of the user's screen, in pixels, minus interface features like the Windows Taskbar.

Tip: To get the height of the screen (excluding the Windows Taskbar), use the availHeight property.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.