Difference between screen.availHeight and window.height()

by

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.

More Related Contents:

  1. $(window).scrollTop() vs. $(document).scrollTop()
  2. Have a pop up window when clicking on an image
  3. window.open popup getting blocked during click event
  4. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  5. javascript to get paragraph of selected text in web page
  6. How to Group by json array by two same key [closed]
  7. How do I display a lightbox on only homepage of my blogger blog?
  8. I want both values before and after submitting a form
  9. dynamic rectangular or square div of any size which can be fitted into a fixed size div [closed]
  10. HTML-encoding lost when attribute read from input field
  11. Can I make a not submit a form?
  12. How to use JQuery with ReactJS
  13. Modifying location.hash without page scrolling
  14. Why is this jQuery click function not working?
  15. How can I export tables to Excel from a webpage [closed]
  16. Hide div after a few seconds
  17. Mobile Safari: Javascript focus() method on inputfield only works with click?
  18. jQuery UI Tabs – How to Get Currently Selected Tab Index
  19. How to prevent page from reloading after form submit – JQuery
  20. Jquery Ajax prevent fail in a deferred sequential loop
  21. JavaScript event registering without using jQuery
  22. How to unbind a specific event handler
  23. Trigger a select form element to show its options (open drop down options list) with Javascript
  24. How do I determine height and scrolling position of window in jQuery?
  25. Nested JSON: How to add (push) new items to an object?
  26. Delay Removing a Class in Jquery [duplicate]
  27. Using delay with HTML or text setting doesn’t work
  28. JavaScript or jQuery equivalent of PHP’s strstr() function
  29. Cross-site AJAX using jQuery
  30. open a custom popup on browser window/tab close

Leave a Comment