Html 自动高度父div内的高度百分比？

当父级高度未指定（自动）时，如何使子级div为父级高度的120%

当父对象具有指定高度时，它将工作：

#条{
背景色：rgba（120,0,0,0.5）；
高度：120px；
}
#孩子{
背景色：rgba（0120,0,0.5）；
身高：120%；
}

洛雷姆

ipsum

多洛

坐下

艾米特。

从逻辑上讲，这将不起作用，因为

height:auto

元素的高度由其子元素的高度决定。如果子对象的高度依赖于父对象的自动高度，则最终会产生循环依赖。由于这个问题，自动高度元素的子元素的高度不能依赖于该元素，因此百分比单位将被忽略

---

你需要后退一步，想出一种不同的方法来实现你最终想要实现的目标。

使用

：before

代替child div

#条{
位置：相对位置；
显示：块；
背景色：rgba（120,0,0,0.5）；
}
#酒吧：以前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：120%；
背景色：rgba（0120,0,0.5）；
}
#孩子{
位置：相对位置；
z指数：10；
}

洛雷姆

ipsum

多洛

坐下

艾米特。

不错，但这仍然意味着，条内的任何元素都不会具有所需的高度。

#bar

的高度取决于它的父div，因为你没有给它一个固定的高度。你可以在

#bar

内放置任意数量的元素，并且每次添加元素时高度都会拉伸，同时，

：after

元素也会增加高度。您想要的高度是多少？问题不是某个特定的期望高度（元素在高度上是动态增长和收缩的）。实际上，挑战在于#bar有一定的背景，而#child有一定的半透明svg背景，必须高出120%。这就是为什么你计算的尺寸是正确的，但我不能给出#bar和#bar的背景：在一起之后，对吗？很好的解决方案！