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

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

html,body{

    height:100%;

    margin:0;

    padding:0;

}　　

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

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>html设置高度100%</title>

  <style>

    html,

    body {

      height: 100%;

      background-color: pink;

      margin: 0;

      padding: 0;

    }

    #wrap {

      width: 50%;

      height: 50%;

      background-color: purple;

    }

  </style>

  <script>

    /* 获取html元素的高度

     *每次发生窗口大小改变，就获取html的高度。可以发现html的高度随着窗口可用区的高度增大而增大，减小而减小。

     */

    window.onload = function () {

      window.onresize = function () {

        var oHtml = document.getElementsByTagName('html')[0];

        var Htmlheight = oHtml.offsetHeight;

        console.log(Htmlheight);

      }

    }

  </script>

</head>

<body>

  <div id='wrap'>

  </div>

</body>

</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. uc浏览器手机版,页面图片不显示

    uc浏览器手机版,有时候上面的轮播广告看不到 原因:uc浏览器会拦截所有带ad的标签 例如: <div id="adDiv"> <img src="/r ...

  2. 51Nod 最大M子段和系列 V1 V2 V3

    前言 \(HE\)沾\(BJ\)的光成功滚回家里了...这堆最大子段和的题抠了半天,然而各位\(dalao\)们都已经去做概率了...先%为敬. 引流之主:老姚的博客 最大M子段和 V1 思路 最简单 ...

  3. css中伪元素before或after中content的特殊用法attr【转】

    [原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...

  4. Kubernetes K8S之存储Volume详解

    K8S之存储Volume概述与说明,并详解常用Volume示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS7.7 2C ...

  5. Vue 路由模块入门

    前端路由 路由是根据不同的 url 展示不同的内容或页面: 前端路由是客户端浏览器可以不依赖服务端,不需要重新请求,可根据不同的URL渲染不同的视图页面 单页面的路由方式有两种: 哈希模式(利用has ...

  6. 蓝桥杯2020 E：七段码

    题解 正规解法是 dfs + 并查集,首先用 dfs 将其所有的情况枚举出来,再用并查集来判断是否在一个连通块上. 许多小伙伴计算的答案为76,主要是判断连通块这方面有问题,倘若不用并查集,直接枚举一 ...

  7. 如何按名称或PID查找一个进程？如何按端口号查找一个进程？如何查看一个进程的CPU和内存、文件句柄使用情况？如何查看CPU利用率高的TOP10进程清单？如何根据PID强制终止进程？

    如何按名称或PID查找一个进程?如何按端口号查找一个进程?如何查看一个进程的CPU和内存.文件句柄使用情况?如何查看CPU利用率高的TOP10进程清单? 目录 如何按名称或PID查找一个进程?如何按端 ...

  8. 用 Span 对 C# 进程中三大内存区域进行统一访问 ，太厉害了！

    一:背景 1. 讲故事 前段时间写了几篇 C# 漫文,评论留言中有很多朋友多次提到 Span,周末抽空看了下,确实是一个非常

  9. 线程池FixedThreadPool

    可重用线程池,只有核心线程,并发无阻塞, public class MainActivity extends AppCompatActivity { @Override protected void ...

  10. MFiX-DEM中的并行碰撞搜索

    基于MFiX-19.2.2 DEM并行程序中的颗粒循环 在DEM并行程序中,每个进程只循环该进程包含的颗粒,并且每个进程还有一层ghost cell,用来存放另一个进程发送过来的颗粒信息. 下面添加一 ...