Example of jquery getting document height and window height

Jquery obtains the document height and window height, $ (document). height (), $ (window). height ()

$ (Document). height (): The document height of the entire webpage

$ (Window). height (): the height of the visible window in the browser

$ (Window). scrollTop (): the height (vertical offset) between the top of the browser visual window and the top of the webpage)

$ (Document. body). height (); // The height of the document body in the current window of the browser

$ (Document. body). outerHeight (true); // the total height of the current file body in the browser window includes border padding margin.

$ (Window). width (); // The width of the visible area of the current window in the browser

$ (Document). width (); // width of the document Object in the current window of the browser

$ (Document. body). width (); // The height of the document body in the current window of the browser

$ (Document. body). outerWidth (true); // The total width of the document body in the current window of the browser includes border padding margin.

It can be understood in one sentence: When the webpage scroll bar is pulled to the lowest end, $ (document ). height () = $ (window ). height () + $ (window ). scrollTop ().

When the webpage height is lower than the browser window, $ (document). height () returns $ (window). height ().

We do not recommend that you use a height such as $ ("html"). height () and $ ("body"). height.

Cause:

$ ("Body"). height (): the body may have a border. The obtained height is smaller than $ (document). height;

$ ("Html"). height (): The height obtained on different browsers has different meanings. To put it bluntly, browsers are incompatible.

$ (Window). The height () value is incorrect. Isn't the returned height of the browser window?

Cause: the webpage is not added <! DOCTYPE> declaration.

Lazy website construction organization js get page height and window height

Practical Application: set the appropriate height for the content area

The Code is as follows:
// Set the appropriate height for 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 only 4 pixel deviation in IE8

Example

The Code is as follows:

// Obtain the page height and width 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... wocould also work in Explorer 6 Strict, Mozilla and Safari XScroll = document. body. offsetWidth; YScroll = document. body. offsetHeight; } } Var every wwidth, every wheight; // www.111cn.net If (self. innerHeight) {// all privileges t Explorer If (document.doc umentElement. clientWidth ){ Required wwidth = document.doc umentElement. clientWidth; } Else { Required wwidth = self. innerWidth; } Optional wheight = self. innerHeight; } Else { If (document.doc umentElement & document.doc umentElement. clientHeight) {// Explorer 6 Strict Mode Required wwidth = document.doc umentElement. clientWidth; Required wheight = document.doc umentElement. clientHeight; } Else { If (document. body) {// other Explorers Required wwidth = document. body. clientWidth; Optional wheight = document. body. clientHeight; } } } // For small pages with total height less then height of the viewport If (yScroll <windowHeight ){ PageHeight = running wheight; } Else { PageHeight = yScroll; } // For small pages with total width less then width of the viewport If (xScroll <1_wwidth ){ PageWidth = xScroll; } Else { PageWidth = required wwidth; } ArrayPageSize = new Array (pageWidth, pageHeight, expires wwidth, expires wheight ); Return arrayPageSize; } // Scroll bar Document. body. scrollTop; $ (Document). scrollTop ();

 

Articles you may be interested in

• Js/jquery get the visible area height and width of the browser window, scroll bar height
• Get the js/jquery code for the browser window height and width