Jquery 如何获得div'；它的外部高度是多少？

我以前遇到过这个问题，还没有真正找到解决办法。我有这个html（简化）：

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

我还尝试使用#body的innerHeight，但它返回相同的值。有没有人知道如何做，希望不必遍历子元素

---

我有这个供您参考。

这可能是由于称为“折叠边距”的长方体模型功能造成的。单独而言，这些元素应返回其正确的计算高度，但当边距在堆叠时塌陷时，结果可能会导致差异

下面是一篇描述该场景的优秀文章：

简单来说，该定义表示当垂直 两个元素的边距相互接触，只有元素的边距 具有最大保证金价值的将被兑现，而 边距值较小的元素将折叠为零

通过一个简短的示例可以最好地演示此行为。考虑一下 以下代码：

h1{
保证金：0；
背景：#cff；
}
div{
利润率：40px0.25px0；
背景：#cfc；
}
p{
利润率：20px0；
背景：#cf9；
}
标题内容
段落内容

更多信息可在W3C Box型号规范中找到：

当两个或多个页边距折叠时，生成的页边距宽度为 折叠页边距的最大宽度。在否定的情况下 页边距，负数的绝对值的最大值 边距从正邻接的最大值中扣除 利润。如果没有正边距，则绝对边距的最大值 相邻边距的值从零中扣除

---

这可能是由于称为“折叠边距”的长方体模型功能造成的。单独而言，这些元素应返回其正确的计算高度，但当边距在堆叠时塌陷时，结果可能会导致差异

下面是一篇描述该场景的优秀文章：

简单来说，该定义表示当垂直 两个元素的边距相互接触，只有元素的边距 具有最大保证金价值的将被兑现，而 边距值较小的元素将折叠为零

通过一个简短的示例可以最好地演示此行为。考虑一下 以下代码：

h1{
保证金：0；
背景：#cff；
}
div{
利润率：40px0.25px0；
背景：#cfc；
}
p{
利润率：20px0；
背景：#cf9；
}
标题内容
段落内容

更多信息可在W3C Box型号规范中找到：

当两个或多个页边距折叠时，生成的页边距宽度为 折叠页边距的最大宽度。在否定的情况下 页边距，负数的绝对值的最大值 边距从正邻接的最大值中扣除 利润。如果没有正边距，则绝对边距的最大值 相邻边距的值从零中扣除

---

@斯图尔特的回答解释了高度“异常”，如果我可以这么说的话。多亏了@Stuart。他的回答让我为这种情况寻找解决方案

这里有一个例子提到了一个黑客，它似乎在IE8、Chrome和FF上工作。它满足了我的需要。这是给感兴趣的人的。基本上，我必须改变我计算高度的方式，如下所示（然后移除包装）：

var b=$（'div#body'）.wrap（''.parent（）.height（）；
$（'div#body'）。展开（）；

@Stuart的回答解释了高度“异常”，如果我可以这么说的话。多亏了@Stuart。他的回答让我为这种情况寻找解决方案

这里有一个例子提到了一个黑客，它似乎在IE8、Chrome和FF上工作。它满足了我的需要。这是给感兴趣的人的。基本上，我必须改变我计算高度的方式，如下所示（然后移除包装）：

var b=$（'div#body'）.wrap（''.parent（）.height（）；
$（'div#body'）。展开（）；

问题在于#body和header之间有一个空白，我没有足够的时间来正确地研究这个问题作为答案，但也可能值得一看

getBoundingClientRect（）。height

？如果您希望父对象的边界框包含子对象的边距，请阅读以下内容：您什么时候尝试这样做？就这样？关于

$（函数）

？在

$（document）.ready（）

或

$（window.load（）

？@AbrahamUribe上，我不想（也不认为我应该）删除h1上的边距来解决问题。问题是#body和header之间有边距，我没有足够的时间对此进行适当的调查，但也值得一看

getBoundingClientRect（）。高度

？如果您希望父对象的边界框包含子对象的边距，请阅读以下内容：您什么时候尝试这样做？就这样？关于

$（函数）

？在

$（document）.ready（）

或

$（window.load（）

？@AbrahamUribe，我不想（也不认为我应该）删除h1上的边距来解决问题。谢谢@Stuart。我明白你和这篇文章的意思，但它并没有完全解释为什么jQuery会计算容器的高度而不考虑子元素的边距（折叠或不折叠）。当作为一个整体计算时，边距不会被分解到文档高度中，因为它们会被折叠。如果你对折叠的边距进行补救，这能解决差异吗？我很好奇。尝试浮动要测试的元素。我想你的答案解释了原因。所以谢谢你。这让我找到了这个黑客：。T

<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>

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

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>

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