Div高度与子边距

Question

我有2个div，我想让他们的身高相等：

var highestCol = $('#SecondColumn').height();
$('.column').first().height(highestCol);

我知道第二个div总是高于第一个div。两个div中都有纯文本，一切正常。但是在添加带有一些边距或填充到第二个div（总是更高）的div之后，计算会中断。它需要更高div的高度，但忽略第二列内的子div的所有边距的总和。

如何计算带有边距/填充的完整div？

Answer 1

我认为他意味着当元素的第一个和/或最后一个子元素分配了底部/顶部边距值时会发生什么。这与段落标记特别相同，因为它们具有底部和顶部的1em。这与框模型规范

中提到的折叠边距一致

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

在这种情况下，jQuery会报告父元素的outerHeight，它不考虑第一个孩子的上边距和最后一个孩子的下边距。

对此的解决方案是为父级和底部/顶部填充设置底部/顶部边距，以便与元素的自然高度保持一致：

.parent-element{
  padding-top: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
  margin-bottom: -1px;
}

这是一个实时样本，希望这对某人可能会派上用场：

http://jsfiddle.net/smqryr05/1

干杯!!

Answer 2

试试这个：

var highestCol = $('#SecondColumn')[0].offsetHeight;
$('.column').first().height(highestCol);

Answer 3

我认为你想要outerHeight(true)而不是'height（）'来包含边距/填充。

'true'是指包括与否的边距。