如何计算元素的高度，考虑折叠的边距 [英] How to calculate an element's height considering collapsed margins

问题描述

我想计算div元素的总高度，考虑折叠 边距，因为子元素，即总空间div元素占据文档中。我很难想象最好的算法/方法。

I want to calculate the total "height" of a div element considering the effect of collapsed margins because of child elements, that is, the total space that div element occupies in the document. I'm having a hard time thinking of the best algorithm / approach to do this.

例如，考虑一个具有 margin的div元素 50px c>的<-c 和高 code>。这个div元素有一个< h2> 元素，它具有 margin-top 20px 。 div 的 margin 将折叠，实际的height的 div 将会是 70px 。但是，使用jQuery方法，我们只能得到 div 的 height ，而不考虑 margin ，或考虑 10 像素 margin ：

Consider, for example, a div element with a margin-top of 10px and a height of 50px. This div element has a child <h2> element that has a margin-top of 20px. The div's margin will then collapse and the actual "height" of that div will be 70px. However, using jQuery methods, we are only able to get the height of the div without considering it's margins, or considering it's 10 pixel margin which would give us the wrong value:

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

为了说明我的观点，这里是一个jsfiddle我创建了两个例子。

To help illustrate my point, here is a jsfiddle I created with two examples.

我最好的猜测，以某种方式遍历div的所有子项，并计算最高的顶部和底部边距。
根据我从W3C规范中理解的内容，如果目标div有 top-$，那么我们可以跳过顶部 margin border-width 或顶部填充。同上下保证金。

My best guess at the moment is we have to iterate over all children of the div in some way and calculate the highest top and bottom margin. According to what I understand from the W3C specification, we can skip this iteration for the top margin if the target div has a top-border-width or a top-padding. Ditto for the bottom margin.

任何帮助将非常感谢。非常感谢！

Any help would be greatly appreciated. Thanks!

编辑：

将目标div元素包装在另一个div中。
然后，我们快速添加和删除透明的borderTop和borderBottom到包装的div，测量它的高度。边界将迫使包装div的边缘不会与其孩子的边缘崩溃。像这样：

One (ugly) solution I thought about was wrapping the target div element in another div. Then, we quickly add and remove a transparent borderTop and borderBottom to the wrapping div, measuring it's height in between. The borders will force the wrapping div's margin not to collapse with its children's margins. Something like this:

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

   $wrapper.insertAfter($target);
   $target.appendTo($wrapper);
   $wrapper.css({
       borderTop: '1px solid transparent',
       borderBottom: '1px solid transparent'
   });
   var result = $wrapper.outerHeight() - 2;
   $target.insertAfter($wrapper);
   $wrapper.remove();

   return result;
};

我为它制作了一个jsFiddle 此处。

I made a jsFiddle for it here.

推荐答案

$ b

Consider this hack:

$( elem ).wrap( '<div style="border:1px solid transparent;"></div>' ).parent().height()

上述表达式返回 70 这是你想要的，对吗？

The above expression returns 70 which is what you want, right?

所以，想法是将你的元素包装在一个具有透明边框集的DIV中。此边框将防止元素的边距干扰其上一个和下一个兄弟的边距。

So, the idea is to wrap your element in a DIV that has a transparent border set. This border will prevent the margins of your element to interfere with the margins of its previous and next sibling.

一旦你得到高度值，你可以解开你的元素.. 。

Once you get the height value, you can unwrap your element...

这篇关于如何计算元素的高度，考虑折叠的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！