Exploration on the height of the browser window, document, html, and body, windowbody

Exploration on the height of the browser window, document, html, and body, windowbody

First, describe the calculation of the elements I understand.

Windows height should be the overall height of the document window (if there are no scrolling entries on the browser, calculate document.doc umentElement. clientHeight

The document height should be the document content height. Calculation Method Math. max (document. body ["scrollHeight"], document.doc umentElement ["scrollHeight"])

The html height should be the height of the html element (including the border scroll bar). The calculation method is htmlElement. offsetHeight.

The body height is the height of the body element (including the border scroll bar). The calculation method is bodyElements. offsetHeight;

The above test method is the same as that of jQuery. Directly use jQuery for testing.

 

Use Case:

Note: # absolute in it is an element that disconnects from the document stream.

　　Test conditions:

　　1. All tests are tested without setting margin/padding as an integer.

2. The detailed height is compared by using QQ tools.

<! DOCTYPE html> 
The display effect is
　　
First group test: IE8

IE8 summary:
The visible window height of the window, excluding the browser scroll bar (the two pictures after IE are compared, and the scroll bar under the second IE occupies 6px ). IE has a feature: the window height is 4px less than the actual visible window (the third IE image shows that the document height is the same as the visual window height ), it indicates that the window side of IE has a 2px gap, that is, the offset value of IE.
Document Height: displays the height of all documents (including the element display from the document stream, available in the first IE diagram) and IE workspace (see the html explanation) take the maximum value (this height determines where the window scroll bar can scroll)
The html height is the window height, which is the height of the browser's work area customized by IE, including the visible window, 2px offset, browser scroll bar, etc.
　　
The body height is the actual height of the content (the content is no longer located from the file stream, and the three figures can be used to testify)
 
Second group test: IE9 +
　　
　　
　　
 
IE9 + summary:
The window height is the visible window height, excluding the browser scroll bar.
Document Height: displays the height of all documents (including the element display from the document stream, available in the first IE diagram) and IE workspace (see the html explanation) take the maximum value (this height determines where the window scroll bar can scroll)
The html height is the window height, which is the height of the browser's work area customized by IE, including the visible window and browser scroll bar, which is more standard than IE8 (no offset, there is no gap between the scroll bar and the work area. See)
　　
Body Height: the actual height of the content (not included in the positioning of the Document Stream)
 
The second test: chrome

Chrome summary:
The window height is the visible window height, excluding the browser scroll bar.
The document height is the height of all documents (including element display from the document stream, available in the first chrome image) and the visual window height (this height determines where the window scroll bar can scroll)
The html height is the same as the body content height.
Body Height: the actual height of the content (not included in the positioning of the Document Stream)
 
Group 3 test: Firefox

Firefox summary:
The window height is the visible window height, excluding the browser scroll bar.
The document height is the height of all documents (including element display from the document stream, available in the first Firefox diagram) and the visual window height (this height determines where the window scroll bar can scroll)
The html height is the same as the body content height.
Body Height: the actual height of the content (not included in the positioning of the Document Stream)
 
Now, let's summarize:
The window height is the visible window height, excluding the browser scroll bar height. In particular, there is a 2px offset on the side of the visible window of IE8, so the height of the visible window of IE8 is 4px smaller than that of the window we see.
The document height is the complete document height, which varies with the browser: The document height of the standard browser = max (the true and complete document height [including the display of elements that are separated from the document stream ], visual Window height); IE browser document Height = max (true and complete document height [including display of elements that exit the document Stream], IE workspace height)
Two types of html height are supported: standard browser html Height = body content height; IE browser html Height = IE workspace height (For details, refer to IE's analysis );
The body height is the actual height of the content (which is no longer included in the positioning of the Document Stream ).
　　
From the comparison summary, we can see that the biggest difference between IE and standard browsers is the calculation method of document and html. One thing to note is that the height of the IE worker en may be the height of the IE work zone, which may include the scroll bar, as shown in the second figure of IE9 + test.
The above test results are also applicable in iframe.
 
This kind of analysis is the most time-consuming. If you think it is good, you should not simply ignore it.
 
If you think this article is good, click [recommendation] in the lower right corner ]!