4

我试图获得我的 div 的 scrollHeight 并且我做对了，但是当我在 CSS 中为那个特定的 div 添加 height 属性时，我得到了一个不同的值。

只需运行小提琴，您将在控制台中看到 scrollheight 属性的值等于 268（等于所有孩子的高度之和）

但是当我在 css 中添加一个高度值（比如 height:50px;）时，输出结果为 252（我认为差异是最后一个子元素的边距）。

有人可以回答为什么会有差异吗？

编辑 由于问题不清楚，我改写了 id。当我指定父 div 的高度时，我得到的滚动高度为 252 像素，而如果我没有指定高度或将其设置为“自动”，我得到 268 像素。我只是想知道为什么在后一种情况下边距也不会崩溃？我不担心折叠的边距，只是想知道为什么在这两种情况下滚动高度不同？

下面给出的答案非常好。但是我也使用javascript得到了正确的scrollHeight（包括最后一个孩子的下边距）

var h = $(div).height();
$(div).height("auto");
var ch = $(div)[0].scrollHeight;
$(div).height(h);
4

1 回答 1

9

重新阅读您的问题后，我发现您在问别的问题。但这仍然是我之前发布的相同答案。

总高度正确计算为254px。当您明确设置小于此值的高度时，浏览器仅计算238px. 这就像您的猜测一样 -16px底部没有边距，并且由于“边距折叠”而发生。由于这条规则，最后一个边距被丢弃：

父母和第一个/最后一个孩子

折叠的边距最终在父级之外。

因此，要修复它，您可以使用：

overflow: hidden;

或者您可以使用填充来代替（此填充将“重新构建”您的边距行为，请参见下面的解释）：

p {
    padding: 8px;
}
p:first-child, p:last-child {
    padding-top: 16px;
}

有关更多信息，请访问 MDN：保证金崩溃。

编辑：这是我的第一个答案，在我重新阅读你的问题之前。我会把它留在这里，以防有人有类似的问题，也因为它会导致相同的解决方案。

这解决了：为什么兄弟姐妹的高度/边距不符合预期？

您的身高计算正确。你所面临的被称为：margin collapsing。

这意味着您所有<p>-tags 的顶部和底部边距都被“合并”了。在您有 7 行的情况下，这意味着：

  • 18px 是一排的高度
  • 顶部和底部的 16px 边距
  • 第一个元素的顶部和最后一个元素的底部按预期显示
  • 所有其他边距都折叠

这导致：

  7 * 18px (height)
+ 6 * 16px (margins in-between)
+ 2 * 16px (margin top and bottom)
= 254px (exact the value calculated by the browser)

您可以通过使用来轻松避免这种情况padding。

有关更多信息，请访问 MDN：保证金崩溃。

于 2012-07-22T23:53:54.643 回答