jquery gets document height and window height summary_jquery

jquery gets the window height and window height, $(document).height(), $(window).height()

1. $(document).height(): The document height of the entire web page
2. $(window).height(): The height of the browser’s visible window
3. $(window).scrollTop(): The height from the top of the browser’s visual window to the top of the web page (vertical offset)
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 document body in the current window of the browser, including border padding margin
6. $(window).width(); //Width of the visible area of ​​the current browser window
7. $(document).width();//Browser current window document object width
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, including border padding margin

To understand it in one sentence: when the scroll bar of the web page is pulled to the lowest end, $(document).height() == $(window).height() + $(window).scrollTop().

When the height of the web page is less than the browser window, $(document).height() returns $(window).height().

It is not recommended to use heights such as $("html").height() and $("body").height().

Reason:

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

$("html").height(): The meaning of the height obtained on different browsers will be different. To put it bluntly, the browser is incompatible.

There is a problem with the $(window).height() value. What is returned is not the height of the browser window?

Reason: The web page does not include the statement.

js gets page height and window height

Practical application: 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);
  }