Widths and Heights in Javascript

Widths and Heights in Javascript

Widths and heights can be a bit of a minefield in JavaScript and jQuery here is brief overview:
Heights
Object Code Type Description
document.body.clientHeight JavaScript Inner height of the HTML document body, including padding but not the horizontal scrollbar height, border, or margin
$(document).height() jQuery Full height of the HTML page, including content you have to scroll to see
screen.height JavaScript Device screen height (i.e. all physically visible stuff)
screen.availHeight JavaScript Device screen height minus the operating system taskbar (if it is present)
window.innerHeight JavaScript The current document’s viewport height, minus OS taskbars.
window.outerHeight JavaScript Height the current window visibly takes up on screen (including taskbars, menus, etc.)
Note: When the window is maximized this will equal screen.availHeight
$(window).height() jQuery The current document’s viewport height, minus OS taskbars.
$(window).innerHeight() jQuery The current document’s viewport height, minus OS taskbars.
$(window).outerHeight() jQuery The current document’s viewport height, minus OS taskbars.
 
Widths
Object Code Type Description
document.body.clientHeight JavaScript Full width of the HTML page as coded, minus the vertical scroll bar
$(document).width() jQuery The browser viewport width, minus the vertical scroll bar
screen.width JavaScript Device screen width (i.e. all physically visible stuff)
screen.availWidth JavaScript Device screen width, minus the operating system taskbar (if present)
window.innerWidth JavaScript The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth JavaScript The outer window width (including vertical scroll bar, toolbars, etc., includes padding and border but not margin)
$(window).width() jQuery The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth() jQuery The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth() jQuery The browser viewport width (minus the vertical scroll bar)