CODEWITHSUNDEEP
html
vdua
vdua

Reputation: 1331

scrollHeight gives incorrect value when height property is provided in css

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);

Upvotes: 6

Views: 25269

Answers (1)

insertusernamehere
insertusernamehere

Reputation: 23580

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.

Upvotes: 10

Related Questions