5

How do we get the actual browser height of a Chrome Browser window? In my testing, if the browser is not using the full height available I am having a hard time calculating its actual height with Javascript.

For the purpose of my example, my browser window has a height of 1033px. There are 7px separating the bottom of the Chrome Browser Window and the Windows Toolbar.

I am unable to figure out a way to calculate the actual height of 1033px from Javascript. If I knew the Nav/Menu/Toolbars Height (109px in my example) I could figure the height out.

 1040px (screen.availHeight)
- 109px (Nav/Menu Toolbars Height)
-   1px (bottom border)
- 923px (window.innerHeight)
-------
    7px (Height Pixels not used by Browser)

1040px - 7px = 1033px (Browser Actual Height)

Nav/Menu/Toolbars Height: 109px
Browser Height: 1033px
Windows Toolbar: 40px

Values from Javascript:
Screen Size: 1080px
screen.height = 1080
screen.availHeight = 1040
window.outerHeight = 1040
window.innerHeight = 923
$(window).height() = 923

Are there any Javascript methods to obtain either the Navigation Menu's Height or the actual Height of the Chrome Browser Window?

Below is an example image of what I am trying to calculate. enter image description here

Daryl
  • 772
  • 8
  • 21

1 Answers1

5

window.outerHeight is the size of the entire Chrome window. If you want to know how much space Chrome's chrome is taking up, you can subtract window.innerHeight from window.outerHeight

Rob M.
  • 35,491
  • 6
  • 51
  • 50
  • Hello Rob. On my screen, if I do an window.outerHeight, I get 1040px. If I do a screenshot of the same window (alt print screen), the image height is 1033px. I've gone around some of the other people in the office, and their window.outerHeight is the same size as the screen shot. I'm at a loss why mine is off 7px in chrome and 5px in Firefox and other people have the correct values. – Daryl May 24 '17 at 21:04
  • 1
    Sounds like you should get a new computer ;) Seriously though, I'm not sure why you are getting incorrect values - as the MDN page notes, `outerHeight` should be giving you the measure of the entire browser window. – Rob M. May 24 '17 at 21:08
  • Since my browser is obviously not working the same as others, I decided to change the display settings and increased the screen size by 125% and that really made the window.outerHeight wrong. I'm wondering if I am going to have trouble trusting window.outerHeight since people who change their display settings may cause the window.outerHeight to be wrong. – Daryl May 24 '17 at 21:36
  • 1
    That's understandable, this has always been a frustrating area - you can [detect zoom level to greater or lesser degree](https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers). Hopefully that helps some – Rob M. May 24 '17 at 21:41
  • Frustrating indeed. I'm wishing I could just get the height of the navigation area including all toolbars, extensions, etc. That would resolve my problem entirely. – Daryl May 24 '17 at 21:46