We Keep Coding

window.innerHeight consistent between Chrome's baked in UI elements

I'm sure this is the working as intended, but I find it kind of a pain.
In Chrome (and probably other browsers)
Generally, window.innerHeight gives me 801 (for example).
If I have a console open along the bottom half of my screen (going horizontally), this changes my window.innerHeight. If I've downloaded something, this pops up a bar at the bottom of the window and also changes window.innerHeight.
I don't having the dev tools open to make my site feel broken.
Is there a different measurement to use in javascript to ignore UI?
I don't want outerWidth, because this includes window tab heights and they won't be consistent cross browser.
I essentially want the height to be consistent whether or not there are any chrome ui elements present.

I don't think you can get exactly that number! The closest you can get is calculating the available height, minus os taskbar and such by using:
window.screen.availHeight
Which MDN says:
Returns the amount of vertical space available to the window on the
screen.
I made a jsfiddle to try it in here
MDN availHeight article

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.

Fixed navigation/header and keyboard scrolling

Page scrolling using the keyboard (PgUp/PgDown, Space) sometimes gets difficult if there are elements with fixed positions at the top of the page, e.g. navigation bars: content that was not visible at the bottom of the viewport might be hidden by the fixed elements after scrolling.
How to address this problem? Do browsers calculate, how far they should scroll? I observed different behaviors for different browsers and also for the same browsers on different pages (for example, Firefox leaves about 80px of old content on http://www.sueddeutsche.de/, but far less on http://www.taz.de. Chromium leaves much more content.).
Is this a problem at all, i.e. does anybody beside me use the keyboard to scroll a web page? Do you know any statistics?
To illustrate the problem, I created a Fiddle:
https://jsfiddle.net/x7hj8c4m/
Try to scroll the content using Space on Firefox. The fixed element will cover text that was not yet visible before scrolling. If you add left: 0, it works.

Very interesting observation.
Firstly, pressing space is equivalent to pressing PgDn. And when PgDn is pressed, the page should scroll vertically by roughly "one page's worth of px". As shown by the OP's fiddle, Firefox in particular calculates this value differently, depending on whether it detects a fixed header.
From my own tests on IE, Chrome, Firefox, I deduced that:
Without a position: fixed element, Chrome and IE scroll down by ~87.5% of the document height; Firefox scrolls down by document height - scrollbar height - ~20px.
With a position: fixed; width: 100% element at the top-left of the screen, Firefox intelligently understands that the element perceptually reduces the document height, and so applies: document height - scrollbar height - fixed element height - ~20px. The condition appears to be quite specific: the element must be fixed exactly at the top-left of the document's box model with full width in order for it to work. The other browsers (Chrome, IE) don't perform such compensation, and performs the standard 87.5% scroll.
I don't know if this is relevant, but it might have something to do with support for position: sticky.

Scrolling by keyboard is a pretty basic behaviour that probably doesn't interact too much (if at all) with the DOM, so expecting it to account for fixed elements is probably too much. There seem to be browser-specific predefined increments (I have no idea if or how they can be customized), but note that the increments are usually smaller (presumably small enough) when you use the up/down arrow keys.

How does chrome extend the search window beyond the browser window

I just happened to notice the below behavior in chrome.The search suggestion is extending beyond the chrome window itself. I am curious as to how this can be implemented. Is this just some css styling? or something more?

This unfortunately is not possible. The search box is an internal part of chrome, thus part of the application itself. Your web page, which has the div inside of it is limited to the browser window itself, any attempt at breaking out of this container will simply end up in your div either being moved off-screen or your browser will simply get scrollbars. So long story short, this is not possible.
Besides that it would be quite dangerous as malicious users could pretty much take over everything you see on your computer screen.

I agree with Paradoxis his answer but there is a way. I can't see any use in it but a select box with a lot of options can extend beyond the chrome window.
I have tried playing with the width and height of the select box to, but as expected that only applies for within the window.

The behavior that you see in the screenshot is the ellipsis property of css
http://jsfiddle.net/HerrSerker/kaJ3L/1/
Still if you want to extend some div beyond the window of your browser
then try giving it more width than the width of your browser
eg:
width: 1900px;

Automatic full size browser [duplicate]

This question already has answers here:
How to make the window full screen with Javascript (stretching all over the screen)
(22 answers)
Closed 6 years ago.
Hy all,
I need a javascript code, that when my site loads, automatically load it into full screen mode, as if i was pressing F11, and i have my reasons to do that..So anyone knows the right code to do that?
I also need to prevent the user from changing the screen size of the page

There is a full screen API, but it is currently an early draft and browser support is very weak.
Foisting full screen mode on anyone who visits your site is one of the more hostile things you can do as a web author. You should seek an alternative design that solves whatever problem you have without doing that.

Unfortunately, there is no perfect way to get the browser to come up in full screen mode. However, you can use the screen object to determine the screen size, and set your window size appropiately. The useful screen properties are availWidth and availHeight or width and height. You can then use those to set the window object properties, either innerWidth and innerHeight or outerWidth and outerHeight. I suggest you play around with retrieving and setting these properties. Also, different browsers behave slightly differently, so, if possible, I suggest you try your code on IE (which (surprise!) is the least standard), Firefox, Safari, and Chrome.
I know the "purists" will tell you forcing a certain window size is not a good thing to do. But in some cases it is appropriate. I have written an application related to the card game bridge, and, if the browser comes up too small, the card images are unreadable. So, the first time a user accessses my web page, I make it as large as I can. Most people leave it that size. But, if they reduce the size, I store the dimensions in a cookie, and the next time they go to my page, it remembers how big to make the page. I have received many compliments on using this approach.