How do I find out the size of a browser application window including the border, header and footer?

Question

I am looking to create a fullsize window using javascript but I am having difficulties trying to take the actual size of the window into account. I can get the resolution of the desktop but if I set the windows width and height to that value, it is not 100% correct as it does not seem to be taking into account the size of the border for the browser application itself. How can I calculate my target width and height to take the browsers application border into account?

Answer 1

To find out the windows height and width you can use the following:

window.innerHeight/Width -> All browsers but not IE

document.body.clientHeight/Width -> All browsers

document.documentElement.clientHeight/Width -> All browsers

More info here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Answer 2

So basically you want to mimic the effect of hitting F11? Check out this link.

I want to warn you that it's a usability nightmare. Try to think of a better way to execute your design without going full screen. Messing with the user's system settings is a HUGE no-no, and changing browser dimensions/resizing windows definitely falls under that category.