html - 当 css 中提供高度属性时，scrollHeight 给出不正确的值

Question

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

只需运行 fiddle您将在控制台中看到 scrollheight 属性的值等于 268(等于所有 child 的高度总和)

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

谁能回答为什么会有差异？

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

下面给出的答案非常好。但是我也使用 javascript 获得了正确的 scrollHeight(包括最后一个 child 的底部边距)

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

Answer 1

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

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

Parent and first/last child

The collapsed margin ends up outside the parent.

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

overflow: hidden;

或者您可以改用填充(此填充将“重建”您的边距行为，请参见下文的解释):

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

有关更多信息，请访问 MDN:Margin collapsing .

---

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

这就解决了:为什么siblings的height/margin不符合预期？

您的高度计算正确。您面临的问题称为:边缘崩溃。

这意味着您所有 <p> 的顶部和底部边距-标签被“合并”。在你有 7 行的情况下，这意味着:

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

这导致:

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

您可以使用 padding 轻松避免这种情况相反。

有关更多信息，请访问 MDN:Margin collapsing .