html的body最多有几个,关于html,body{height:100%}的理解

有时候你看到别人写css代码的时候会发现:html,body{height:100%}

首先我们先看下w3c 对于height的定义 :

首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字.

Document

div{

height: 100%;

background-color: #ff0;

}

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

Document

div{

height: 100%;

background-color: #ff0;

}

body{

height: 100%;

}

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

Document

div{

height: 100%;

background-color: #ff0;

}

body,html{

height: 100%;

}

结果如下:

这下 明白 html,body{height:100%}存在的意义了吧.少一个都不行.

标签：body,100%,高度,height,html,div

来源： https://blog.csdn.net/suandfei/article/details/102766624