First of all, I understand the calculation of these several elements
The window height should be the visible height of the document's Windows (not including the browser's scroll bar), and the calculation method document.documentElement.clientHeight
Document height should be the height of the file content, calculation method Math.max (document.body["ScrollHeight"], document.documentelement["scrollheight"])
The HTML height should be the height of the HTML element (including the border ScrollBar), and the calculation method htmlelement.offsetheight
Body height is the height of the BODY element (including the border scroll bar), the calculation method bodyelements.offsetheight;
The above test method is the same as jquery processing. Use jquery directly to test.
Case:
Note: the #absolute inside is the element that is out of the document flow.
Test Prerequisites:
1. All tests are measured without setting the margin/padding as an integer.
2. Details of which the author uses the QQ tool to take pixel contrast
<!DOCTYPE HTML><HTMLLang= "CH-CN"> <Head><MetaCharSet= "Utf-8"><Scripttype= "Text/javascript"src= ' Jquery-1.9.1.js '></Script> <styletype= "Text/css">Html,body, Div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, pre, Code, form, fieldset, legend, Input, button, TextArea, p, blockquote, TH, TD{margin:0;padding:0; }#absolute{position:Absolute;Margin-left:300px;Height:500px;width:500px;background:#ff0; }#normal{Height:300px;width:300px;background:#f00; } </style> </Head> <Body> <DivID= ' absolute '>I'm absolute.</Div> <DivID= "normal">I'm normal.</Div> <Scripttype= "Text/javascript"> functionShow () {Console.log ("Window Height" +$ (window). Height ()); Console.log ("Document Height" +$ (document). Height ()); Console.log ("HTML Height" + $("HTML"). Height ()); Console.log ("Body Height" + $("Body"). Height ()); } </Script> </Body> </HTML>
The display effect is
First set of tests: IE8
IE8 Summary:
Window visual height, not including browser scroll bar (ie two graphs are available, the second IE has a scroll bar of 6px). IE has a feature: window height compared to the real visual window will be less than 4px (the third IE picture, this time the document height and Visual window height is the same), Ie The window four sides have 2px gap, ie their own offset value .
Document height, full display of the height of all document content (non-IFRAME "include elements out of the document Flow", the first IE is available) and IE workspace (see HTML interpretation) to the maximum (this height ultimately determines where the window scroll bar can scroll to show where)
The HTML height is the height of the window, which is the height of the browser workspace field, including the visual window, 2px offset, browser scroll bar and so on, see below
The body height is the true height of the content (no longer inside the document flow location, three graphs can testify for this)
Second set of tests: ie9+
ie9+ Summary:
Window height is the height of the visible windows, not including the browser scroll bar.
Document height, full display of the height of all document content (non-IFRAME "include elements out of the document Flow", the first IE is available) and IE workspace (see HTML interpretation) to the maximum (this height ultimately determines where the window scroll bar can scroll to show where)
HTML height is the height of the window, this window is the height of the browser work area of IE itself, including the visual window, browser scroll bar, more than IE8 to standard (no offset, scroll bar and work area Edge also no gap, see)
Body Height content true height (no longer inside the document flow location)
Second set of tests: Chrome
Chrome Summary:
Window height is the height of the visible Windows , not including the browser scroll bar .
Document height is the height of the full display of all document content (non-IFRAME "include elements out of document Flow", the first chrome chart is available) and the maximum visible window height (this height ultimately determines where the window scroll bar can scroll to show)
The HTML height is the same height as the body content
Body Height content true height (no longer inside the document flow location)
Third set of tests: Firefox
Firefox Summary:
Window height is the height of the visible windows, not including the browser scroll bar.
Document height is the height of the full display of all document content (non-IFRAME "include elements out of document Flow", first Firefox graph available) and the Maximum visible window height (this height ultimately determines where the window scroll bar can scroll to show)
The HTML height is the same height as the body content
Body Height content true height (no longer inside the document flow location)
Well, here's a summary:
The window height is the height of the visible Windows , excluding the height of the browser scroll bar. In particular, IE8 has a 2px offset on the edge of the visible window, so the IE8 's visible window height is 4px smaller than the window we see.
Document height is the full file height, which is calculated differently depending on the browser: standard browser Document height = max (document True full height includes display of elements out of document flow, visible window height ) Internet Explorer Document height = max (document True full height "includes the display of elements out of the document Flow",ie workspace height )
HTML height root two: Standard browser HTML height =body content height, ie browser html height = ie Workspace height (specific view IE analysis);
The body height is the true height of the content (no longer inside the document flow location).
As can be seen from the comparison, the most important difference between IE and standard browser is the method of document and HTML calculation. One thing to note is that the documen height of IE, because it may be the height of the IE workspace, may include scroll bars, as can be seen in the second figure of the ie9+ test.
This analysis is the most time-consuming, if you feel good, don't just look at the top.
If you feel this article is good, please click on the bottom right "recommended"!
Explore the browser window, document, HTML, body height
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
