Influence of DOCTYPE on values of $ (window). height (), doctype. height

Influence of DOCTYPE on values of $ (window). height (), doctype. height

Preface:The company project needs to use a vertical center of the bullet box, similar vertical center pop-up layer on the internet is similar, because the project is based on Jquery, so use $ (window ). height ()-layer. height ()/2 + $ (document ). scrollTop () Achieves vertical displacement. After testing the various browsers, there is no problem. After the background staff moved the value to the project, there is a problem. When the page goes beyond one screen, in chrome and FF, the pop-up box is centered relative to the entire page instead of the vertical center of the current screen.

All conclusions are as follows:
1. window height, $ (window). height ()
2. document height, $ (document). height ()
3. rolled up height, $ (window). scrollTop ()

Locate the cause: Then, we found that no DOCTYPE is set for the background staff's page, so in chrome, $ (window ). height () = $ (document ). height (), $ (document ). height () indicates the height of the entire window when the actual content height of the webpage is not full (this value changes when the window is enlarged or reduced ), when the page is larger than one screen, it indicates the actual height of the content of the entire page. there is no objection, and it is not affected if no DOCTYPE is set. However: $ (window ). height () in DOCTYPE is transitional. when dtd is used, regardless of whether the actual height of the webpage content exceeds the full screen, it is equal to the height of the entire window (this value changes when the window is enlarged or reduced ), if DOCTYPE is not set, $ (window ). height () = $ (document ). height (). When the content is too large, $ (window ). height () is the actual height of the webpage, not equal to the window height.

Solution:S to get the window height, you can only make the corresponding changes based on DOCTYPE, do the following when no DOCTYPE is set
If ($ (document). height () >=$ (window). height ()){
_ Required wheight = document. body. clientHeight;
} Else {// alert ($ (window). height ());
_ Required wheight = $ (document). height ();
};
When DOCTYPE is set to transitional. dtd, export wheight = $ (window). height ()