Question

我有一个设为height:0和padding-bottom:100%的父对象，以保持正方形的长宽比。在父级中，我希望再有一个div占父级高度的80％。

<div class="parent" style="width:100%; height:0; padding-bottom:100%">
   <div class="child" style="width:100%; height: 80%"></div>
</div>

我知道80％的身高是相对于其父母的身高，并且将父母的身高设置为0，因此逻辑上会影响孩子的身高是合理的。在维持父母的两个长宽比同时保持操纵孩子身高的能力方面，是否有任何解决方法？

Answer 1

您可以绝对定位孩子：

<div class="parent" style="width:100%; height:0; padding-bottom:100%">
    <div class="child" style="position: absolute; left: 0; top: 10%; right: 0; bottom: 10%"></div>
</div>

Answer 2

您可以使用大众单元：

<div class="parent" style="width:100vw; height:100vw">
   <div class="child" style="width:100%; height: 80%"></div>
</div>

无法匹配<div>高度

2 个答案: