69

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?

Kunj
  • 1,980
  • 2
  • 22
  • 34
Akshay
  • 1,735
  • 6
  • 21
  • 29

2 Answers2

185

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.

fregante
  • 29,050
  • 14
  • 119
  • 159
jigfox
  • 18,057
  • 3
  • 60
  • 73
  • 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 04 '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 05 '12 at 03:13
  • Love the graphical explanation! @Raje if you're using javascript, create a function that gets the window height. function getWindowHeight() { $(window).height(); } Then call the function on $(window).load(); or $(window).resize(); – CharlieM Dec 12 '12 at 16:15
  • 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. – mrbinky3000 Apr 23 '13 at 14:32
  • Note that `$(window).height()` will not work in combination with safari version and jquery version ( I dont know which exactly ). use `window.innerHeight` instead – Mephiztopheles Dec 11 '14 at 09:47
  • 1
    in Windows 8 `screen.availHeight` is equal to `screen.height` **minus** the operating system's bars – Steven Pribilinskiy Mar 29 '15 at 09:48
  • screen.availHeight === window.outerHeight is not correct even when the window is maximized. – Deepak Mishra Feb 09 '16 at 11:46
  • The situtation is a mess. IE 11 in Windows 10 yields (on a maximized window) `[screen.height, screen.availHeight, window.outerHeight, window.innerHeight]` = [864, 824, 838, 709] (it's funny that availHeight is smaller than outerHeight ...); Looking at Chrome (v56): it not even follows the spec (CSSOM View Module) as it gives you device pixels rather than CSS pixels. Chrome results for the above: [864, 864, 824, 759]. Zooming shows: only window.innerHeight is given in CSS pixels as it decreases with increasing zoom level. – NicBright Mar 21 '17 at 06:52
  • 2
    @StevenPribilinskiy in macOS it also `screen.availHeight` is equal to `screen.height` **minus** the operating system's bars – Persian Brat Jan 03 '22 at 11:22
2

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.

RainCast
  • 4,134
  • 7
  • 33
  • 47