html - 自动调整大小的 div，分别保持与其父级的高度比

Question

假设您有一个 div (A) 和一个 div (B)。 div (A) 是父级，并且具有 height: auto。 div (B) 还有 height: auto。我想知道的(如果没有 .js 也可能的话)是如何将 div (B) 保持在 div (A) 的 90% 高度。感谢所有回复。

编辑我想我应该提到，需要在 div 中扩展 div 的原因是因为我希望子 div 中的内容随着添加更多内容而扩展。随着 child 的扩大，我希望 parent 也扩大，同时与内部 div 保持统一的距离。

Answer 1

可能不会没有 JavaScript

假设 div (A) 有一些文本(因此它有一个自动计算的高度)并且它的当前高度是 x。如果 div (B) 的高度为 y，其中 y == x*0.9 那么 div (A) 的高度将不再足以容纳 div (B)，因为它的高度现在需要为 x+x*0.9。据我所知，这是一个循环定义

编辑:在 divA 和 divB 都是其他对象的父级的情况下，这里仅使用 CSS 保持 90% 的比例div 而不是 divA 是 divB 的父级(height:300px 和 width 一样是任意的s):

<!--
    a = 0.52631579, b = 0.47368421
    a + b = 1.0
    b/a = 0.9 (roughly)
-->
<div style="background:#f00; width:150px; height:300px;">
    <div id="divA" style="background:#0f0; width:100px; height:52.631579%"></div>
    <div id="divB" style="background:#00f; width:100px; height:47.368421%"></div>
</div>