关于html,body{height:100%}的理解

本文链接： https://blog.csdn.net/suandfei/article/details/102766624

有时候你看到别人写css代码的时候会发现:html,body{height:100%}
首先我们先看下w3c 对于height的定义 :
在这里插入图片描述
首先这个height:可能为百分数就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        div{
            height: 100%;
            background-color: #ff0;
        }
     
     </style>
</head>
<body>
     <div> </div>
</body>
</html>

给div设置高度height:100% 结果是页面根本不会显示…因为 height:100%是想当于包含块的这里div的包含块是body body 没有设置height 所以这时候的height:100% 相当于完全没有作用. 但是如果我们给body加上height:100%呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        div{
            height: 100%;
            background-color: #ff0;
        }
        body{
            height: 100%;
        }
     
     </style>
</head>
<body>
     <div>

     </div>
</body>
</html>

自己可以去测试你会发现页面上还是啥没有,你会想明明body包含块有高度了,为啥还是没有呢? 因为height:100% 是不是也是一个相对高度,而他是相对于浏览器跟标签也就是HTML 的高度. 他不是一个定值.所以height:100% 根本继承不到高度, 但是我给html 加上height:100% 就会发现div 也有高度了.html:height:100% 是相对于浏览器的本身的高度.这是可以获取到的.在dom中用window.innerHeight 这是在 html文件加载就自动形成的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        div{
            height: 100%;
            background-color: #ff0;
        }
        body,html{
            height: 100%;
        }
     
     </style>
</head>
<body>
     <div>
 </div>
</body>
</html>

结果如下:
在这里插入图片描述
这下明白 html,body{height:100%}存在的意义了吧.少一个都不行.

关于html,body{height:100%}的理解

猜你喜欢