如何检测子div的高度超过父div的高度

Question

我有一个div A，其中包含div B，其中包含div C，其中包含div D，其中div A的默认高度为40px。就像下面这样。

<div id='A' style="height: 40px">
  <div id='B'>
     <div id='C'>
         <div id='D'></div>
     </div>
  </div>
</div>

问题是，div C 的实现方式是可以动态改变高度。因此，它可能会超过 div A 的默认高度 (40px) 并导致一些外观问题。

我想要实现的是将div A的高度保持为40px，只要其任何子div的高度不超过40px。但是，如果其任何子 div 的高度超过 40px，我希望子 div 的高度覆盖div A 的高度。例如，当div C将高度更改为80px时，我希望div A的高度为80px。

我想知道是否需要编写一个方法来动态计算每个子 div 的高度，并执行类似getElementById('A').style.height = null返回的子高度大于 40px 之类的操作。

有更好或更简单的方法吗？

Answer 1

尝试使用“最小高度”。

 min-height: 40px;