Question

之前我遇到过这个问题，但还没有真正找到解决方案。我有这个html（简化）：

<div class="outer">
    <header>my header section</header>
    <div id="body">
        <h1>Page H1</h1>
        <p class="content"></p>
    </div>
    <footer>footer section</footer>
</div>

我正试图获得#body（使用jQuery）的实际高度：

var b = $('#body').outerHeight(true);

但这并不是我认为正确的高度。我期望的高度是FireFox在“Box Model”（在开发者工具中）中报告的高度。但是jQuery返回一个不同的值，它似乎排除了h1标签的上边距。

我也尝试使用#body的innerHeight，但它返回相同的值。任何人都知道如何做到这一点，希望无需迭代子元素？

我有fiddle供你参考。

Answer 1

这可能是由于称为“折叠边距”的盒子模型功能造成的。单独地，这些元素应返回其正确的计算高度，但当边距折叠为堆积时，结果可能会导致您的差异。

这是一篇描述该场景的优秀文章：http://reference.sitepoint.com/css/collapsingmargins

简单来说，这个定义表明当垂直时   两个元素的边距是触及的，只有元素的边缘   具有最大保证金价值将被兑现，而保证金   边际值较小的元素将折叠为零。

这个行为最好用一个简短的例子来证明。考虑一下   以下代码：

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 40px 0 25px 0;
  background: #cfc;
}
p {
  margin: 20px 0 0 0;
  background: #cf9;
}

<h1>Heading Content</h1>
<div>
  <p>Paragraph content</p>
</div>

enter image description here

更多信息可以在W3C Box Model规范中找到：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

当两个或多个边距折叠时，产生的边距宽度为折叠边距宽度的最大值。在负面的情况下边距，负边界的绝对值的最大值保证金从正相邻的最大值中扣除利润率。如果没有正边距，则绝对值的最大值相邻边距的值从零开始扣除。

Answer 2

@Stuart的答案解释了身高'异常'，如果我可以这么说的话。感谢@Stuart。他的回答促使我为这种情况寻找解决方案。

这是一个SO item，它提到了一个hack，它似乎适用于IE8，Chrome和FF。它满足了我的需求。对于感兴趣的人，这里是my updated fiddle。基本上，我必须改变计算高度的方式如下（并在之后移除包装）：

   var b = $('div#body').wrap('<div style="border:1px solid transparent;"></div>' ).parent().height();
   $('div#body').unwrap();

如何获得div的外部高度？

2 个答案: