html - 无法匹配 <div> 高度

Question

我有一个父级设置为 height:0 和 padding-bottom:100% 以保持正方形纵横比。在 parent 内部，我想要另一个占 parent 高度 80% 的 div。

<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

你可以绝对定位 child :

<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>