zoukankan      html  css  js  c++  java
  • 获取可视区域高度赋值给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>
  • 相关阅读:
    07: mysql锁和事物隔离
    06: mysql索引查找原理及调优
    06: 字典、顺序表、列表、hash树 实现原理
    05:树结构
    02:MongoDB操作
    01:MongoDB基础
    02: CMDB设计思路
    二级制包安装Tomcat 与 RPM包安装Tomcat
    Docker的volume机制实现容器数据的持久性存储
    配置docker的私有仓库
  • 原文地址:https://www.cnblogs.com/Han39/p/7977026.html
Copyright © 2011-2022 走看看