本文探讨了CSS中html,body{height:100%}的使用，解释了为何需要同时设置这两个元素的高度，以确保内容能够填充整个浏览器窗口。内容指出，height:100%是相对于其包含块的高度，body的高度需要基于HTML标签的高度，而HTML的高度则是相对于浏览器窗口。若只设置body的高度，div等子元素仍无法继承有效高度，添加html的高度设置后问题得以解决。"
131702485,1212183,QT编程：文件操作指南,"['QT开发', '文件处理', 'GUI编程']
有时候你看到别人写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%}存在的意义了吧.少一个都不行.
扫一扫
1万+
到【灌水乐园】发言
