小编vit*_*bal的帖子

我想计算div元素的总"高度",考虑由于子元素而导致的折叠 边距的影响,即div元素在文档中占据的总空间.我很难想到最好的算法/方法来做到这一点.

举个例子,有一个div元素margin-top的10px和height的50px.这个div元素有一个孩子<h2>,有一个元素margin-top的20px.该div的margin,然后将折叠,实际"height"的那个div会70px.但是,使用jQuery方法,我们只能height在div不考虑它的情况下得到它margins,或者考虑它的10像素margin会给我们错误的值:

$(elem).outerHeight() // 50
$(elem).outerHeight(true) // 60

为了帮助说明我的观点,这里有一个我用两个例子创建的jsfiddle.

我现在最好的猜测是我们必须以某种方式迭代div的所有孩子并计算最高的上下边距.根据我从W3C规范中理解的内容,margin如果目标div具有a top-border-width或a ,我们可以跳过顶部的迭代top-padding.同样适合底部margin.

任何帮助将不胜感激.谢谢!

编辑:

我想到的一个(丑陋)解决方案是将目标div元素包装在另一个div中.然后,我们快速添加和删除透明borderTop和borderBottom到包装div,测量它们之间的高度.边界将强制包装div的边缘不会随着孩子的边缘而崩溃.像这样的东西:

var collapsedHeight = function( target ) {
   var $wrapper = $('<div />'),
     $target = $(target);

   $wrapper.insertAfter($target);
   $target.appendTo($wrapper);
   $wrapper.css({
       borderTop: …