前端学习笔记----------------html、body元素的高度问题

最新推荐文章于 2021-06-26 06:00:45 发布

长安有故里，安河桥有你

最新推荐文章于 2021-06-26 06:00:45 发布

阅读量260

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_43611484/article/details/107435153

版权

最近看别人的代码，总有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就可以用百分比起作用了。

长安有故里，安河桥有你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记----------------html、body元素的高度问题

最近看别人的代码，总有html,body{height:100%}这行代码，不知道为什么，特此记录一下。<!DOCTYPE html><html lang="en"><head> <title>test</title> <style> * { margin: 0; padding: 0; } .box {
复制链接

扫一扫