獲取可視區域高度賦值給div（解決document.body.clientHeight的返回值為0的問題）
阿新 • • 發佈：2019-01-22
設定html,body{height:100%}
在使用html5文件型別的時候， 設定了html body的高度100%之後，兩個瀏覽器就都能獲取document.body.clientHeight了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>彈出層自定義（自動獲取高度）</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} .Load{width:100%; background-color: rgba(221,221,221,0.5);} .LoadDiv{margin: auto; text-align: center;vertical-align: middle;position: absolute;top: 50%; left: 50%;} </style> <script type="text/javascript"> $(document).ready(function () { window.onload = function () { getHeight();//呼叫函式 }; function getHeight() { var Load = document.getElementById('Load');//獲取Load的高度 var body_height = document.documentElement.clientHeight;//document.body.clientHeight中在<!DOCTYPE html>宣告下會返回0 alert(body_height); Load.style.height = body_height + 'px';//將正文的高度賦值給Load } }); </script> </head> <body> <div class="Load" id="Load"> <div class="LoadDiv"> <img src="layer/theme/default/loading-0.gif"/> </div> </div> </body> </html>