html的height:100%;高度是多少

html设置height:100%;表示一屏高度，类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中，设置页面高度为1屏幕高度通常设置：

  1. html,body{
  2.     height:100%;
  3.     margin:0;
  4.     padding:0;
  5. }　　

可以通过案例设置来查看html的实际高度。通过案例中改变窗口的高度大小，可以发现html的高度也是在变换的。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>html设置高度100%</title>
  7.   <style>
  8.     html,
  9.     body {
  10.  
  11.       height: 100%;
  12.       background-color: pink;
  13.       margin: 0;
  14.       padding: 0;
  15.     }
  16.  
  17.     #wrap {
  18.       width: 50%;
  19.       height: 50%;
  20.       background-color: purple;
  21.     }
  22.   </style>
  23.   <script>
  24.     /* 获取html元素的高度
  25.      *每次发生窗口大小改变，就获取html的高度。可以发现html的高度随着窗口可用区的高度增大而增大，减小而减小。
  26.      */
  27.  
  28.     window.onload = function () {
  29.  
  30.       window.onresize = function () {
  31.         var oHtml = document.getElementsByTagName('html')[0];
  32.         var Htmlheight = oHtml.offsetHeight;
  33.         console.log(Htmlheight);
  34.       }
  35.     }
  36.  
  37.   </script>
  38.  
  39. </head>
  40.  
  41. <body>
  42.   <div id='wrap'>
  43.  
  44.   </div>
  45.  
  46. </body>
  47.  
  48. </html>

思考：设置整个页面的高度为一窗口可用区的一屏幕高度时，为什么还要设置body的高度为100%?

因为body如果为默认设置，它的高度值为auto，会根据子元素的高度来支撑高度。倘若子元素的高度设置为依赖父元素(body)的高度来支持的百分比数值，那么就形成了悖论。最后浏览器找不到计算高度的情况下，body的高度实际被设置为0。

html的height:100%;高度是多少的更多相关文章

  1. 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  2. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  3. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  4. IE6 CSS高度height:100% 无效解决方法总结

    原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉 ...

  5. CSS高度自适应 height:100%;

    在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE htm ...

  6. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  7. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

  8. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

  9. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

随机推荐

  1. DVWA渗透测试初级练习

    下面的内容是我2020年后半年进行的简单的dvwa的渗透实验,顺序可能会有一些问题,但是内容我一定会搞完整,DVWA渗透环境的windows10配置phpstudy Command Injection ...

  2. lua 源码阅读 1.1 -> 2.1

    lua 1.1 阅读1. hash.c 中 a) 对建立的 Hash *array 用 listhead 链式结构来管理,新增lua_hashcollector,用来做 Hash 的回收处理. ps: ...

  3. MeteoInfoLab脚本示例：计算不同区域平均值

    这里用美国做例子,有一个美国区域的格点温度场数据(usgrid.data),需要计算出每个州(state)的平均温度.当然需要有一个包含各州行政区域的shape文件了(相关文件可以在此帖中下载:htt ...

  4. MeteoInfoLab脚本示例：水汽通量散度计算

    用ncep数据计算水汽通量散度的脚本.需要air, uwnd, vwnd和rhum变量.数据是4维数据,需要固定时间维和高度维,数据中纬度维的数据是反向的,因此读取时需要特殊的设置(::-1).脚本中 ...

  5. day18 Pyhton学习 内置函数最后七个

    1. enumerate  枚举函数 for i in enumerate(['a','b','c'],1): print(i)#(1, 'a')(2, 'b')(3, 'c') goods_lst= ...

  6. python并发编程之多进程(实践篇) 转

    一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了multiproce ...

  7. zookeeper动态添加/删除集群中实例(zookeeper 3.6)

    一,用来作为demo操作的zookeeper集群中的实例: 机器名:zk1 server.1=172.18.1.1:2888:3888 机器名:zk2 server.2=172.18.1.2:2888 ...

  8. spring注解@Transactional 和乐观锁，悲观锁并发生成有序编号问题

      需求:系统中有一个自增的合同编号,在满足并发情况下,生成的合同编号是自增的. 测试工具:Apache Jmeter 实现方法: 创建一个数据库表.编号最大值记录表 表结构类似 CREATE TAB ...

  9. py正则表达式（全是干货系列）

      正则表达式的作用在这里不多赘述了,反正处理文本任务贼六就对了.Python中的正则表达式是内置在re模块中的,我们就对这个模块进行详细地讲解.这是一篇媲美帮助文档的文章!对就这么自信,不服你顺着网 ...

  10. 八皇后C++版本

    emmmm~刚刚学C++,写一个八皇后,凑合看吧嘤嘤嘤 1 #include <iostream> 2 #include<cstdlib> 3 #include<cmat ...