gpt4 book ai didi

html - child 的 `height: 100%;` 没有占据 parent 的全高,为什么?

转载 作者:行者123 更新时间:2023-12-03 23:01:53 25 4
gpt4 key购买 nike

parent 和 child 都有box-sizing: border-box; .根据 MDN:

<percentage> Defines the height as a percentage of the containing block's height.


那么 child 的高度应该是 500px同样,但显然不是,它具有 的高度父内容高度 ,不是 parent 高度 .在包括 IE 在内的许多浏览器上尝试过此代码后,它们的工作方式都相同,这是为什么呢?
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
<title>Test</title>
<style>
body {
background: #000;
}
.parent {
border: 50px solid blue;
padding: 20px;
width: 500px;
height: 500px;
background: green;
overflow: auto;
}
.child {
background: red;
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>

最佳答案

使用 border-box 只是定义给定的高度应该如何应用于填充和边框值。在您的示例中,这导致 .parent 的外部高度为 500px .
基本上它只是一种方便的方法 - 这样您就不必自己计算实际高度(就像以前 border-box 是一回事)。没有它,你需要定义 height: 360px;达到 500px 的外部高度。
但是.child的包含块仍然驻留在由 .parent 分隔的区域内的填充。百分比高度是相对于包含块 ( ref ) 计算的。在这个例子中是相同的 360px如果没有 border-box,你会使用在 .parent .

关于html - child 的 `height: 100%;` 没有占据 parent 的全高,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65213634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com