availHeight property returns the height, in CSS pixels, of the space available for Web content on the screen. Since
Screen is exposed on the
window.screen property, you access
You can similarly use
Screen.availWidth to get the number of pixels which are horizontally available to the browser for its use.
availHeight = window.screen.availHeight;
A numeric value indicating the number of CSS pixels tall the screen's available space is. This can be no larger than the value of
window.screen.height, and will be less if the device or user agent reserves any vertical space for itself.
For instance, on a Mac whose Dock is located at the bottom of screen (which is the default), the value of
availHeight is approximately the value of
height (the total height of the screen in CSS pixels) minus the heights of the Dock and menu bar, as seen in the diagram below.
If your web application needs to open a new window, such as a tool palette which can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here.
In the main window, when it's time to open the panels, code like the following is used.
let paletteWindow = window.open("panels.html", "Panels", "left=0, top=0, width=200");
The Panels window's HTML, in
window.outerHeight = window.screen.availHeight;
The result is something similar to the below. Note the Panels window filling all available vertical space at the left of the screen.
On a Windows system, this would function similarly, by opening the window and sizing it vertically so it uses all available vertical space, leaving room for the taskbar and any other interface elements that reserve space.
|CSS Object Model (CSSOM) View Module
The definition of 'Screen.availHeight' in that specification.
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Basic support||?||3.6 (1.9.2)||?||(Yes)||?|
|Feature||Android Webview||Chrome for Android||Firefox Mobile (Gecko)||Firefox OS||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||CompatUnknown||?||1.0 (1.9.2)||?||?||?||?|