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

有时候你看到别人写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%}的理解相关推荐

关于height:100%的简单理解
要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属 ...
html div 高度100,深入理解CSS的height:100%和height:inherit之间的使用区别
inherit确实是个好东西,不仅节约代码,尤其与background之流打交道:而且还利于维护. 注意,如果想要继承background的图片,不能这样缩写,会显得很天真: CSS Code复制内容 ...
CSS 如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
CSS中height:100vh和height:100%的区别是什么？
CSS中height:100vh和height:100%的区别首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...
css如何让height:100%起作用？
原文出处:css如何让height:100%起作用? 当你设置一个元素的高度为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大对数情况下,这样做法没有任何效果,你知道为什么height:100 ...
height:100%和height:inherit比较
height:100%和height:inherit 在我的理解中. height: 100%; 是会继承父元素的100%的高度 height: inherit; 是会继承父元素的高度我觉得他们的意 ...
html body div height: 100%;
最近做了测试 html{ height: 100%;//全部内容高度,包括滚动出现的内容 background-color:#000; } body{ height: 100%;//只一页屏幕,用作滚 ...
div高度、宽度100% div width、height 100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
让height: 100%生效
html: <body><div class="box"></div> </body> css: .box{position: fi ...

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

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

最新文章

热门文章