Div高度与子边距

Question

我有2个div,我想让他们的高度相等:

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

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

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

Answer 1

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

在这种情况下,jQuery为父元素报告一个outerHeight,它不考虑第一个子节点的上边距和最后一个子节点的下边距.

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

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

这是一个实时样本,希望这对某人来说可能派上用场:

干杯!!

Answer 2

我认为您希望outerHeight(true)包含边距/填充而不是“height()”。

“真实”是指是否包含边距。