【html,body{height:100%}为什么还要设html的高度？ _自适应】

html,body{height:100%}为什么还要设html的高度？

我也踩过这个坑( 2 )

已统计您的踩坑,无需重复点击

回答(1)

自适应

详细描述

截图

代码

<!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>
    html,body{height:100%}
    .parentElement{
        position:relative;
        background-color:aqua;
        width:200px;
        height:50%; 
    }

 .childElement{
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     background-color:blueviolet;
        width:50%; 
        height: 25%;
        margin-left:25%;
 }
    </style>

</head>
<body>
    <div class="parentElement">
    <div class="childElement"></div>
    </div>
    
</body>
</html>

编辑于2024-11-24

时间排序

热门排序

[散修弟子]CSS-6511
0

元素高度百分比需要向上遍历父级标签，需要找到一个定值高度才能起作用，如果中途有个height：auto；或者是未设置height属性，则高度百分比是不会起作用的。由你的代码可以知道，div的父级元素是body，body的父级是html，那么html的父级元素又是谁呢，我们知道浏览器是负责分配块级元素宽度的，当然也会分配高度，但是浏览器没有这样做。其实浏览器本身也是有宽高，那么设置html{height：100%}的话，就可以获取浏览器的定高了，以至于后面的div和body都会有依赖。

查看全部>

编辑于2018-07-22

去第页