您现在的位置是:首页 > 技术栈 > HTML/CSSHTML/CSS

html、body元素高度问题

2020-01-22【HTML/CSS】人已围观

简介最近学习时看到别人的代码里,总有html,body{height:100%}这行代码,不知道为什么,特此记录一下

<!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。

 

这里说一下<!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就可以用百分比起作用了。 

Tags:HTML   前端开发

很赞哦! ()

相关文章

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

站点信息

  • 建站时间:2018-06-26
  • 网站程序:帝国CMS7.5
  • 文章统计33篇文章
  • 标签管理标签云
  • 统计数据友盟数据
  • 网站地图XML网站地图
  • 微信公众号:扫描二维码,关注我们