在CSS中提供height属性时，scrollHeight的值不正确 [英] scrollHeight gives incorrect value when height property is provided in css

问题描述

我试图获得我的div的scrollHeight，并且我正确地得到它，但是当我在该特定div的css中添加height属性时，我获得了不同的值。

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

但是当我在css中添加高度值（比如height：50px;）时，输出（不同之处在于最后一个子元素的边距，我认为）。

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

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

下面给出的答案非常好。不过，我也使用javascript（包括最后一个孩子的底部边距）得到了正确的scrollHeight。 。高度（）;
$（div）.height（auto）;
var ch = $（div）[0] .scrollHeight;
$（div）.height（h）;

解决方案

重新阅读您的问题后，再问别的。但它仍然是我先前发布的相同答案。

整体高度计算正确< 254px 。当您明确设置小于此值的高度时，浏览器仅计算 238px 。这是 - 就像您的猜测一样 - 在底部没有 16px 保证金并且是因为保证金折叠而发生的。由于以下规则，最后一个边距被丢弃：

父母和最后一个孩子

折叠后的保证金最终会超出家长范围。

所以，要解决这个问题，您可以使用：

  overflow：hidden; 
  

或者您可以使用填充（此填充将重新构建您的保证金行为，请参阅下文）

  p {
 padding：8px; 
} 
 p：第一个孩子，p：最后一个孩子{
 padding-top：16px; 
} 
  

欲了解更多信息，请访问MDN：拼合。

---

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

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

您的身高计算正确。你所面对的是：边缘折叠。

这意味着您的所有 < p> - 标签是合并的。在你使用7行的情况下，它意味着：

• 18px是一行的高度


• 16px顶部和底部边缘
  
• 第一个元素的顶部和最后一个底部显示为预期


• 所有其他边距均已折叠

结果如下：

  7 * 18px（高度）
 + 6 * 16px（中间的边距）
 + 2 * 16px（边距顶部和底部）
 = 254px（确切地说由浏览器计算的值）
  

您可以轻松避免使用 padding 来代替。

有关更多信息，请访问MDN：保证金折叠。 p>

I tried to get the scrollHeight of my div and I am getting it right but when I add height property in the css for that particular div I am getting a different value.

Just run the fiddle and you will see in console value of scrollheight property to be equal to 268 (which is equal to the sum of the heights of all the children)

but when I add a height value in the css (say height:50px;) the output comes out to be 252 (the difference is the margin of the last child element, I think).

can anybody please answer why there is a discrepancy ?

Edit Since the question was not clear I have rephrased id. When I specify the height of parent div I get the scroll Height as 252 pixels while if I do not specify the height or set it to "auto" I get 268 pixel. I just wanted to know why margins do not collapse in the later case as well ? I am not worried about the collapsed margins but just want to know why the scroll height is different in these two scenarios ?

The answer given below is perfectly fine. However I also got the correct scrollHeight using javascript (including the bottom margin of the last child)

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

解决方案

After re-reading your question I found that you're asking something else. But it's still the same answer I posted earlier.

The overall height is calculated correctly to 254px. When you set a height explicitly that is smaller than this value, the browser calculates only 238px. This is - like your guess - without 16px margin on the bottom and happens because of "margin collapsing". The last margin is discarded because of this rule:

Parent and first/last child

The collapsed margin ends up outside the parent.

So, to fix it you could use:

overflow: hidden;

Or you could use padding instead (this padding would "re-build" your margin behavior, see below for explanation):

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

For more information visit the MDN: Margin collapsing.

---

Edit: This was my first answer, before I re-read you question. I'll leave it here, in case somebody has a similar question and also because it leads to the same the solution.

This solves: Why is the height/margin of siblings not as expected?

Your height is calculated correctly. What you're facing is called: margin collapsing.

It means that your top and bottom margins of all your <p>-tags are "merged". In your case with 7 rows it means:

• 18px is the height of one row
• 16px margins on top and bottom
• top of first element and bottom of last are shown as expected
• all other margins are collapsed

and this results in:

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

You can easily avoid this by using padding instead.

For more information visit the MDN: Margin collapsing.

这篇关于在CSS中提供height属性时，scrollHeight的值不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！