zoukankan      html  css  js  c++  java
  • 高度百分比生效的方法height:100%

    eight:100%这个概念是子节点相对于父容器而言;所以要让此属性生效,必要的一点就是:父容器必须具有具体的高度信息;

    直接在<body>的子节点(如div中)写height:100%是不会生效的,因为此时<body>的高度是不确定的,默认是auto;

    方法一

    给从根的父容器到子容器的所有容器都设置好百分比高度信息

    比如:

    <!DOCTYPE html>  
    <html lang="zh-cn" style="height:100%;100%;overflow:hidden;">  
        <head>  
            <meta charset="utf-8" />  
            <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" />  
            <title>132</title>        
        </head>  
        <body style="height:100%;100%;padding:0;margin: 0;">  
      
            <div style="height:100%;100%;background-color:#787878" >  
                 
            </div>  
        </body>  
    </html>  

    这样从根的Html开始,到字的div结束,全部都具有百分比高度,这样,就都能够获取到高度信息;

    方法二

     给父容器设置具体的高度信息;

    比如直接写死在样式中,或者用javascript来设置;

    示例,用js使<body>得到高度,从而使其中的div全屏:

    <!DOCTYPE html>  
    <html lang="zh-cn">  
        <head>  
            <meta charset="utf-8" />  
            <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" />  
            <title>132</title>        
        </head>  
        <body id="body" style="padding:0;margin: 0;">  
            <div style="height:100%;100%;background-color:#787878" >  
              
            </div>  
        </body>  
        <script type="text/javascript">  
            var screenHeight=document.documentElement.clientHeight;  
            var screenWidth=document.documentElement.clientWidth;  
            var body=document.getElementById('body');  
            body.style.width=screenWidth+"px";  
            body.style.height=screenHeight+"px";  
        </script>  
    </html>  

    方法三

    给父容器设置位置信息,让其得到高度信息;

    示例,用css使body得到高度,从而使其中的div全屏:

    <!DOCTYPE html>  
    <html lang="zh-cn">  
        <head>  
            <meta charset="utf-8" />  
            <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" />  
            <title>132</title>        
        </head>  
        <body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;padding:0;margin: 0;">  
            <div style="height:100%;100%;background-color:#787878" >  
                 
            </div>  
        </body>  
    </html>  
  • 相关阅读:
    World Wind Java开发之一(转)
    Excel如何显示隐藏列?
    Oracle开发›如何取出每个分组的第一条记
    如何解决EXCEL中的科学计数法
    使用POI 读取 Excel 文件,读取手机号码 变成 1.3471022771E10
    POI读取单元格信息及单元格公式
    java中判断字符串是否为数字的方法的几种方法
    阿里云OSS的 存储包、下行流量包、回流流量包 三者有啥关系
    vue+datatable+vue-resource动态获取jsonp数据2
    vue+datatable+vue-resource动态获取jsonp数据
  • 原文地址:https://www.cnblogs.com/xuyanjiayou/p/8856183.html
Copyright © 2011-2022 走看看