Get document height and window height with jquery _ jquery-js tutorial

This article mainly introduces jQuery's method of getting pages and element height and width. It is very practical. If you need it, you can refer to it. The following example shows how to quickly obtain the height and width of the visible area of a document or browser based on jquery parameters and methods. I hope this example can help you. Jquery obtains the window height and window height, $ (document). height (), $ (window). height ()

1. $ (Document). height (): The document height of the entire webpage
2. $ (Window). height (): the height of the visible window in the browser
3. $ (Window). scrollTop (): the height (vertical offset) between the top of the browser visual window and the top of the webpage)
4. $ (Document. body). height (); // The height of the document body in the current window of the browser
5. $ (Document. body). outerHeight (true); // the total height of the current file body in the browser window includes border padding margin.
6. $ (Window). width (); // The width of the visible area of the current window in the browser
7. $ (Document). width (); // width of the document Object in the current window of the browser
8. $ (Document. body). width (); // The height of the document body in the current window of the browser
9. $ (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 addedStatement.

Js retrieves the page height and window height

Practical Application: set the appropriate height for the content area

// 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) {$ ("p. container "). height (winH-headerH-footerH-50 );}