css - position absolute的元素的height设置为100%，参照物是relative的父亲？
本文介绍了css - position absolute的元素的height设置为100%，参照物是relative的父亲？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<title>Document</title>
<style>
body {
width: 200px;
}
.parent {
width:100%;
height: 0;
padding-top:56.25%;
background-color: pink;
position: relative;
}
.child {
width:100%;
height:100%;
background-color: black;
position: absolute;
}
</style>
</head>
<body>
<div class="parent"> this is parent
<div class="child"> this is child</div>
</div>
</body>
</html>显示如下：
我如果去掉child的position:absolute,那么结果显示如下：
这个我就不明白了，height:100%不应该child的高度还是0么，为什么加了absolute后child的height就变成父亲的height+padding了？
解决方案
The percentage is calculated with respect to the height of the generated box's containing block.
这个对应于你的去掉 absolute 的情形，因为父元素设置了height:0，所以子元素也应该是0。
Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element.
这个对应于 absolute 的情形。
参考：
这篇关于css - position absolute的元素的height设置为100%，参照物是relative的父亲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
