jquery gets examples of document heights and window Heights

jquery Gets document height and window height, $ (document). Height (), $ (window). Height ()

$ (document). Height (): Document height of the entire Web page

$ (window). Height (): Height of the browser visual window

$ (window). scrolltop (): Height of the top of the browser's visual window from the top of the page (vertical offset)

$ (document.body). Height ();//browser Current window document body level

$ (document.body). Outerheight (true);//browser Current window document body's total height includes border padding margin

$ (window). width (); Browser current window visual area width

$ (document). Width ()//Browser Current window Document object widths

$ (document.body). width ();//browser Current window document body height

$ (document.body). Outerwidth (true);//Browser The total width of the body of the current window document includes border padding margin

A word to understand is this: when the Web scroll bar is pulled to the lowest end, $ (document). Height () = = $ (window). Height () + $ (window). scrolltop ().

$ (document) when the page is not high enough for the browser window. Height () returns $ (window). Height ().

It is not recommended to use $ ("html"). Height (), $ ("body"). Heights ().

Reason:

$ ("body"). Height (): The body may have a border, and the height will be higher than $ (document). Height () small;

$ ("html"). Height (): The height of the different browsers to get the meaning of the difference will be, the plain is that the browser is not compatible.

$ (window). Height () value problem, not return the height of the browser window?

Reason: Web page does not add <! Doctype> statement.

Lazy people build station to arrange JS get page height and window height

Practical application: Set the appropriate height of the content area

The code is as follows	Copy Code
Set the appropriate height of the content area var doch = $ (document). Height (), Winh = $ (window). Height (), Headerh = $ (". Header"). Outerheight (); Footerh = $ (". Footer"). Outerheight (); if (doch<=winh+4) { $ ("Div.container"). Height (winh-headerh-footerh-50); }

Note: Winh+4 because there is only 4 pixel deviation under IE8

Cases

The code is as follows

Copy Code

Get the height, width of the page function GetPageSize () { var xscroll, Yscroll; if (window.innerheight && window.scrollmaxy) { Xscroll = window.innerwidth + Window.scrollmaxx; Yscroll = Window.innerheight + window.scrollmaxy; } else { if (Document.body.scrollHeight > Document.body.offsetHeight) {//all but Explorer Mac Xscroll = Document.body.scrollWidth; Yscroll = Document.body.scrollHeight; else {//Explorer mac...would also work in Explorer 6 Strict, Mozilla and Safari Xscroll = Document.body.offsetWidth; Yscroll = Document.body.offsetHeight; } } var windowwidth, WindowHeight; if (self.innerheight) {//all except Explorer if (document.documentElement.clientWidth) { WindowWidth = Document.documentElement.clientWidth; } else { WindowWidth = Self.innerwidth; } WindowHeight = Self.innerheight; } else { if (document.documentelement && document.documentElement.clientHeight) {//Explorer 6 Strict Mode WindowWidth = Document.documentElement.clientWidth; WindowHeight = Document.documentElement.clientHeight; } else { if (document.body) {//other explorers WindowWidth = Document.body.clientWidth; WindowHeight = Document.body.clientHeight; } } } For small pages and total height less then height of the viewport if (Yscroll < WindowHeight) { PageHeight = WindowHeight; } else { PageHeight = Yscroll; } For small pages and total width less then width of the viewport if (Xscroll < windowwidth) { PageWidth = Xscroll; } else { PageWidth = WindowWidth; } Arraypagesize = new Array (PageWidth, PageHeight, WindowWidth, windowheight); return arraypagesize; } scroll bar Document.body.scrollTop; $ (document). ScrollTop ();