We Keep Coding

$window.innerHeight returns different values in chrome and firefox

I want to determine the viewport height with $window.innerHeight or document.documentElement.clientHeight but it turns out that Firefox and Chrome are returning different values (a few pixels).
Anyone already faced this issue?

The height of the body is determined by the available height inside the browser window.
Different browsers have different graphic interfaces, varying toolbar heights, number of toolbars, etc. All those elements will influence the height available for the actual HTML content.
Try the following in various browsers (in full size)
console.log(document.documentElement.clientHeight)

The height you are getting is more that likely because the design of firefox and chrome are different by a few pixels. I can resize my browser to however I want. Monitor and resolution also determines that. Not really an issue if you are designing your UI correctly, meaning using media queries in CSS and creating a responsive design instead of fixed values.

Set viewport size for a browser

I was playing with a webapplication page developed by me using selenium.
Using selenium JavaScriptExecutor I executed following script.
executor.executeScript("return window.innerWidth");
executor.executeScript("return window.innerHeight");
to my surprise, the so called viewport size came different from Chrome, IE & Firefox.
Chrome: 1366x667
IE: 1366x667
Firefox: 1366x657
Then I realized that for body and main div, right next to body I gave css style width and height as 100% which in turn effects the view port size. As different borwsers are having different size of toolbars and menu, this 100% value changes when actual page is rendered.
So I used window.resizeTo(w,h) for setting a common viewport size. But I realized it doesn't work with modern browsers until and unless window is opened by the same script.
So I used selenium's
driver.manage().window().setSize(new Dimension(w,h));
yet I am not able to set the common view port size.
Please help to find, is it possible to set common viewport size using selenium?
Do let me know, if you need anymore info.
I executed following line for all browsers:
driver.manage().window().getSize();
Answer I got is 1382x744
So I believe this about the overall browser window, not only rendering area.
And I got confused that based on the difference of innerWidth how to calculate the browser window's new size?
PS: I have all the browsers upgraded to latest version (IE is version 11 as I am on windows 7), selenium version I am using is 2.46.x

"to my surprise, the so called viewport size came different from Chrome, IE & Firefox."
It should not be surprising that the view port size is different on all browsers, Safari even has a different one as well. When you are calling window.innerHeight it only counts the browsers inner content. So anything outside of it is not counted, the area where you enter your URL is entered is not counted for example. So each browser uses a different amount of maximum height by their tabs, and Global address bar.
When you use driver.manage().window().setSize(new Dimension(w,h)); and set it to 1920x1080 for example then all browsers will be set to that size, but of course they will have different inner height being used.
If you want the entire browser to render as 1920x1080 then I would suggest with
using Robot robot = new Robot();
robot.keyPress(KeyEvent.VK_F11);
Thread.sleep(250);
robot.keyRelease(KeyEvent.VK_F11);
but I would advise against it, since a more valid test is to use the normal inner height of the browser, since most user do not press F11 and view their content at full screen.

How to find the browser height including the toolbars and buttons with javascript?

Is there a way to find the browser height with the toolbars and buttons of the browser, not only the window or document height?

For the size of the viewport, you use window.innerWidth and window.innerHeight. For the whole window, including decorations, use window.outerWidth and window.outerHeight. Then, all you need to do is subtract one from the other.
Edit: There is no supported way of doing this in IE8 and older. This is explained in this article and also provides a workaround which involves resizing the browser window. There is also this Stack Overflow answer.

Resizing browser window in Dual Display mode

it it possible to resize the browser window width to fit 2 monitors through JavaScript ?
Let's say we have 2 monitors with same resolutions : 1280x760.
is it possible to expand the width of the browser to fit 2 monitor? that 1280 X 1280.
thanks.

Firstly: Don't do this! Your users will hate you for it.
Secondly, there are a number of possible configurations possible for users who have more than one monitor.
Some users will have them set to be treated as a single extra-large display; others will have them working more independantly of each other. A colleague of mine has a display-splitter hardware which means that although he has two monitors, the PC only sees one, so when he maximizes his windows, they cover both screens. My set up on the other hand is different; when I maximize, the window expands to fill a single monitor.
Some users will even have different monitor sizes and different resolutions betweeen their monitors. I know one person who has one monitor in landscape mode, and the other rotated 90 degrees in portrait mode.
A lot of these things will make it phyically impossible to have a window that is maximized across all monitors, so even if you could make it work for some users, it wouldn't work for everyone.
Assuming you do manage to get the browser window stretched across both monitors, you now have the problem of working out how to layout your page without your text and graphics being split by the edges of the monitors. Your browser won't know where the monitor edges are, so you could easily end up with important parts of your page content being broken in half which could make your site virtually unreadable.
Even if you know in advance exactly what the user's screen resolution is going to be, you still have this problem because you don't know what the user's browser window looks like. They may have the history or bookmarks side-panels open. Their desktop settings may be different too; they may have their Windows taskbar aligned on the side of the screen rather than the bottom. None of these things are in your control, and will affect the screen space available to your browser, which in turn means you can't predict where the edges of the monitors will be even in an environment where you know the screen resolution.
In short, I don't believe it's possible, and I don't believe it's desirable. I strongly recommend not doing it.

To quote from David Flanagan, "Javascript, The Definitive Guide" (5th edition), Section 14.4.3:
"The Window object defines methods that move and resize a window. Using these methods is typically considered very poor form: the user should have exclusive control of the size and position of all windows on her desktop. Modern browsers typically have an option to prevent JavaScript from moving and resizing windows, and you shuld expect this option to be on in a sizable percentage of browsers" (emphasis added)

Javascript scrollbar based on browser window size

I have a Flash file embedded into HTML - the objects inside are place based on the browser's screen size.
Most of the time I don't want a scroll bar, as things are correctly placed, but once the browser window gets too small it'd be nice to have it.
So, the main question: can I have a Javascript code listening for the browser window, then adding a scroll bar if it's smaller than a certain number?
Many thanks!!
-m

For IE > 6 and all other major browsers, you don't even need JavaScript, a
body { min-height: 150px }
should do.
Compatibility info on min-height on Quirksmode.org