Html page height different browser compatibility settings

The page needs to be nested in the Cross-origin iframe, but the page height is not fixed. After each page obtains its own height, it uses js to notify iframe to adjust the display.

When the page obtains its own height, it is always larger than expected. After referring to others' blogs, I found that it was originally the w3c standard.

That is, add

After adding, document.doc umentElement. scrollHeight can be properly obtained under IE and Chrome, but it is too high in firefox. The opposite is true when you use document. body. scrollHeight.

For this reason, math.min(document.doc umentElement. scrollHeight, document. body. scrollHeight) is used to obtain the minimum height, which is normal.

However, after the W3C standard is added, the screen also has some small differences, such as the row spacing of the page, it seems that IE is about to be shorter, and some parts overlap. Css is also case sensitive.

 

 
Content:

Js get page height
14:20:02 | category: JavaScript | label: body document clientwidth width page height | font size large and small subscriptions
<Script>
Function getInfo ()
{
Var s = "";
S + = "visible area width of the webpage:" + document. body. clientWidth;
S + = "visible area height of the webpage:" + document. body. clientHeight;
S + = "visible area width of the webpage:" + document. body. offsetWidth + "(including the width of the edge and scroll bar )";
S + = "visible area height of the webpage:" + document. body. offsetHeight + "(including the width of the edge )";
S + = "webpage body full text width:" + document. body. scrollWidth;
S + = "webpage text Height:" + document. body. scrollHeight;
S + = "high page volume (ff):" + document. body. scrollTop;
S + = "high page volume (ie):" + document.doc umentElement. scrollTop;
S + = "Left of the webpage to be rolled:" + document. body. scrollLeft;
S + = "webpage body part:" + window. screenTop;
S + = "webpage body part left:" + window. screenLeft;
S + = "screen Resolution height:" + window. screen. height;
S + = "screen Resolution width:" + window. screen. width;
S + = "available screen workspace Height:" + window. screen. availHeight;
S + = "available workspace width:" + window. screen. availWidth;
S + = "your screen settings are" + window. screen. colorDepth + "bit color ";
S + = "Your screen Settings" + window. screen. deviceXDPI + "pixels/inches ";
// Alert (s );
}
GetInfo ();
</Script>
In my local test:
It can be used in IE, FireFox, and Opera
Document. body. clientWidth
Document. body. clientHeight
It is very simple and convenient.
In the company's projects:
Opera is still in use
Document. body. clientWidth
Document. body. clientHeight
However, IE and FireFox use
Document.doc umentElement. clientWidth
Document.doc umentElement. clientHeight
It turned out to be W3C standards.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If this line is added to the page

In IE:
Document. body. clientWidth ==> BODY object width
Document. body. clientHeight ==> BODY object height
Document.doc umentElement. clientWidth ==> visible area width
Document.doc umentElement. clientHeight => visible area height
In FireFox:
Document. body. clientWidth ==> BODY object width
Document. body. clientHeight ==> BODY object height
Document.doc umentElement. clientWidth ==> visible area width
Document.doc umentElement. clientHeight => visible area height
?
In Opera:
Document. body. clientWidth ==> visible area width
Document. body. clientHeight ==> visible area height
Document.doc umentElement. clientWidth ==> Page Object width (that is, the width of the BODY object plus the Margin width)
Document.doc umentElement. clientHeight ==> Page Object height (that is, the height of the BODY object plus the Margin height)
If W3C standards are not defined
IE:
Document.doc umentElement. clientWidth ==> 0
Document.doc umentElement. clientHeight => 0
FireFox:
Document.doc umentElement. clientWidth ==> Page Object width (that is, adding the bodyobject width to the marginwidth) document.doc umentElement. clientHeight ==> Page Object height (that is, the BODY object height plus the Margin height)
Opera:
Document.doc umentElement. clientWidth ==> Page Object width (that is, adding the bodyobject width to the marginwidth) document.doc umentElement. clientHeight ==> Page Object height (that is, the BODY object height plus the Margin height)
It is really troublesome. In fact, from the perspective of development, it is much easier to reduce the number of objects and methods and not to use the latest standards.