<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1, maximum-scale=1"> <Scriptsrc= "Jq/js/jquery-2.0.3.js"></Script> <style>Body{Height:1000px;margin:20px 0;padding:15px 0;Border:10px solid Red;} </style> <Script> $(function(){ //Browser Current window viewable area heightConsole.log ($ (window). Height ()) console.log (document.documentElement.clientHeight)//the height of the browser's current window documentConsole.log ($ (document). Height ())//Body+margin+padding+border 1000+40+30+20=1090Console.log ($ (document.body). Height ())//BodyConsole.log ('document.body.offsetheight==='+document.body.offsetHeight)//Body+padding+border 1000+30+20=1050Console.log ('document.body.clientheight==='+document.body.clientHeight)//body+padding 1000+30=1030 //Web pages are being rolled out of the high IE two are 0Console.log (DOCUMENT.DOCUMENTELEMENT.SCROLLTOP)//FF supports chrome for 0Console.log (DOCUMENT.BODY.SCROLLTOP)//Chrome supports FF for 0Console.log (Document.documentElement.scrollTop+Document.body.scrollTop)//pages of high jQuery being rolled awayConsole.log ($ (document). ScrollTop ())}) </Script></Head><Body> </Body></HTML>
Document height and volume go height