此问题已在此处有答案：
Why's CSS percentage (%) height applied to grand-child of flex element?（3个答案）
7天前关闭
我希望有人能帮助我，谢谢。
Why's CSS percentage (%) height applied to grand-child of flex element?也有类似的问题，但和我的问题不太一样。我的问题是：“.item-1”元素的父元素“.box”没有设置高度，为什么“.item-1”的高度百分比有效？
下面是复制代码：CodePen
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>高度百分比-工作</title>
</head>
<body>
<style>
.wrap {
background-color: #888;
display: flex;
align-items: normal;
}
.item-1 {
background-color: pink;
width: 100px;
height: 10%;
/* Take effect height=400*10% = 40 */
/* The expected height percentage does not work, that is, the
final height of ".item-1" is 0. */
}
.item-2 {
height: 400px;
width: 200px;
background-color: skyblue;
}
</style>
<div class="wrap">
<div class="box">
<div class="item-1"></div>
<div class="item-2"></div>
</div>
</div>
</body>
</html>
1条答案
按热度按时间2q5ifsrm1#
这件事往往会变得有点复杂的理解，但与我忍受。默认情况下，CSS元素的高度设置为auto，这意味着它的呈现高度将由该元素内部元素的高度定义，在本例中为
div。现在，如果将高度设置为100%或x%，则您正在设置相对高度。现在，高度不是由内部包含的元素定义，而是由父元素的高度定义。重要的是要注意，相对高度是相对于最接近定位的元素，即.box类元素。现在，既然你显式地将item-2的高度定义为400 px，这就给了浏览器一些东西来考虑作为标准。使用这个400 px，浏览器将.box的高度定义为400 px，然后将.wrap的高度定义为.box的高度，即400 px。现在，因为item-1的高度是10%（相对高度），所以它将.box高度作为标准并将其设置为40 px。
我鼓励你测试一下，试着将.item-1 height的值修改为一个绝对值，比如100 px，div现在将采用500 px（100+400）的高度，因为没有什么是相对的，一切都是绝对的。
我知道这不是最好的解释，但我很乐意回答任何后续问题。