如何检测子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 的高度，并在返回的子高度大于 40px 时执行类似getElementById('A').style.height = null的操作。

有没有更好或更简单的方法来做到这一点？

Answer 1

尝试使用“最小高度”。

 min-height: 40px;

Answer 2

根据我的观点，您无需检查每个子元素的高度。

如果您检查 B 子元素高度就足够了，因为那是子元素 C 和 D 的父元素

据此，以下JS代码将为您提供解决方案

// get parent div #A 
var parentElement = document.getElementById('A'); 

// parent div #A initialHeight
var parentDivOffsetHeight = 40; // no need to mentionion px

// get child div #B offest height
var childDivOffsetHeight = document.getElementById('B').offsetHeight;

// check if child div height is greater than parent div or not
if(childDivOffsetHeight > parentDivOffsetHeight){
    //set child div height to parent div
    parentElement.style.height = childDivOffsetHeight+'px';
}

相关JS小提琴： https : //jsfiddle.net/katheer_mizal/3ouypevd/18/

要检查元素高度，您可以使用以下方法

clientHeight包括填充。

var clientHeight = document.getElementById('B').clientHeight;

offsetHeight包括内边距、滚动条和边框。

var offsetHeight = document.getElementById('B').offsetHeight;

.style.height等于 $('#content').css('height'.

var offsetHeight = document.getElementById('B').style.height;