2

我以前遇到过这个问题，并没有真正找到解决方案。我有这个 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 在“盒子模型”（在开发人员工具中）中报告的高度。但是 jQuery 返回一个不同的值，它似乎排除了 h1 标签的上边距。

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

我有这个小提琴供你参考。

4

2 回答 2

4

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

这是一篇描述该场景的优秀文章：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>

在此处输入图像描述

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

当两个或多个边距折叠时，产生的边距宽度是折叠边距宽度的最大值。在负边距的情况下，从正邻接边距的最大值​​中减去负邻接边距的绝对值的最大值。如果没有正边距，则从零中减去相邻边距的绝对值的最大值。

于 2013-11-05T23:43:52.067 回答
0

@Stuart 的回答解释了高度“异常”，如果我可以这样称呼的话。感谢@Stuart。他的回答使我为这种情况寻找解决方案。

这是一个提到 hack 的SO 项目，它似乎适用于 IE8、Chrome 和 FF。它满足了我的需求。这是我为任何感兴趣的人更新的小提琴。基本上，我必须改变计算高度的方式如下（然后删除包装）：

   var b = $('div#body').wrap('<div style="border:1px solid transparent;"></div>' ).parent().height();
   $('div#body').unwrap();
于 2013-11-06T01:12:16.143 回答