html、body元素的高度问题

时间 2020-07-17

标签 html body 元素高度问题栏目 HTML 繁體版

原文原文链接

最近看别人的代码，总有html,body{height:100%}这行代码，不知道为何，特此记录一下。css

<!DOCTYPE html>
<html lang="en"> <head> <title>test</title> <style> * { margin: 0; padding: 0; } .box { height: 50%; background-color: #ccc; } </style> </head> <body> <div class="box"></div> </body> </html>
复制代码

按理说.box的高度应该是浏览器的50%，可是事实并不是如此，html body div 的高度都为0。html

这里说一下<！DOCTYPE html>，启用标准模式，标准模式下的html、body元素的高度均为0。咱们都知道,一个块级元素没有主动为其分配高度和宽度的时候,浏览器会默认为其分配最大宽度,可是不负责高度的分配,没有设置高度时,高度是由子元素堆砌起来的,那么html和body的高度也是由子元素堆砌起来的。另外,元素高度设置为百分比须要向上遍历父元素找到一个定值高度才能起做用,若是中途有个height为auto或者没有设置高度,那么设置百分比高度就不起做用了浏览器

div的父元素是body，body的父元素是html，经过height:100%层层向上，找到顶级获取定高。 html的百分比是相对于浏览器而言，其余是相对于其父元素而言

/* 设置html的height:100%，就能够获取浏览器的定高 */
html,body{
  height: 100%;
}
复制代码

未设置<！DOCTYPE html>，默认启用怪异模式，怪异模式下，浏览器按照本身的方式解析渲染页面，在不一样的浏览器就会显示不一样的样式,html、body元素的高度即为窗口的高度. 写html网页时候上来就把html,body{height:100%}写上去。这样后面的div就能够用百分比起做用了。spa