首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)

获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)

作者头像
用户1212940
发布2018-01-23 10:11:51
1.9K0
发布2018-01-23 10:11:51
举报
文章被收录于专栏:LambdaLambda

获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)

设置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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-01-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档