带子边距的 Div 高度

我有 2 个 div，我想让它们的高度相等：

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

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

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

我认为他的意思是当元素的第一个和/或最后一个子元素分配了底部/顶部边距值时会发生什么。这对于段落标签尤其常见，因为它们的底部和顶部边距均为 1em。这与盒模型规范中提到的折叠边距一致

http://www.w3.org/TR/CSS2/box.html#collapsing-margins 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 http://jsfiddle.net/smqryr05/1

Cheers!!