有时候你看到别人写css代码的时候会发现:html,body{height:100%}
首先我们先看下w3c 对于height的定义 :
首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字.
Documentdiv{
height: 100%;
background-color: #ff0;
}
给div设置高度height:100% 结果是页面根本不会显示…因为 height:100%是想当于包含块的 这里div的包含块是body body 没有设置height 所以这时候的height:100% 相当于完全没有作用. 但是如果我们给body加上height:100%呢?
Documentdiv{
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文件加载就自动形成的.
Documentdiv{
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