在CSS中提供height属性时,scrollHeight给出的值不正确

Question

我试图得到我的div的scrollHeight,我正确,但是当我在css中为该特定div添加高度属性时,我得到了不同的值.

只需运行小提琴,你就会看到scrollheight属性的控制台值等于268(等于所有孩子的高度之和)

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

任何人都可以回答为何存在差异？

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

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

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

Answer 1

重新阅读你的问题后,我发现你在问别的问题.但它仍然是我之前发布的相同答案.

正确计算总高度254px.当您明确设置小于此值的高度时,浏览器仅计算238px.这是 - 就像你的猜测 - 16px底部没有边距,因为" 保证金崩溃 " 而发生.由于此规则,最后一个边距被丢弃:

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

折叠的保证金最终在父母之外.

所以,要修复它你可以使用:

overflow: hidden;

或者您可以使用填充(此填充将"重新构建"您的保证金行为,请参阅下面的说明):

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

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

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

您的身高正确计算.你所面对的是:边缘崩溃.

这意味着你所有<p>标签的顶部和底部边距都是"合并"的.在您的情况下有7行,这意味着:

这导致:

  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.