Thanks for the comment; I think I got offsetHeight and scrollHeight mixed up in my head, and it looks like scrollHeight is generally better than offset since it is computed for the height of the element as if all of it were visible, even if in reality you need to scroll to view its entirety. I've updated my original comment to address this.
However, as for the comment about margins, can you provide a source? Because based on the MDN docs, it certainly looks like scrollHeight is not supposed to include margins either. And for the 'display:contents' issue, I was not able to reproduce:
However, when changing display to contents for a non-root element, all of the methods, including scrollHeight, seemed to fail:
Yes, yes and yes. MDN is slightly lacking in this area, and you really need to read the actual specs.
First, on display:contents, I specfically said the "computed value" because the relevant spec says "The root element’s display type is always blockified. Additionally, a display of contents computes to block on the root element."
Second, on the matter of margins, it differs depending on whether we're dealing with the root element or not. Step 4 of the rules for the calculation of the scrollHeight say that the root element is treated specially. It says that "If the element is the root element and document is not in quirks mode return max(viewport scrolling area height, viewport height)." The calculation of the viewport scrolling area is quite detailed but an abbreviation for the bottom edge says it's "The bottom-most edge of the bottom edge of the initial containing block and the bottom margin edge of all of the viewport’s descendants' boxes." (my emphasis) Note that the initial containing block itself doesn't have margins.
If you compare that with the rules for other elements, then you see that the margins of the target element are not counted, but the margins of its descendant boxes are counted.
Thanks for the comment; I think I got
offsetHeightandscrollHeightmixed up in my head, and it looks likescrollHeightis generally better than offset since it is computed for the height of the element as if all of it were visible, even if in reality you need to scroll to view its entirety. I've updated my original comment to address this.However, as for the comment about margins, can you provide a source? Because based on the MDN docs, it certainly looks like
scrollHeightis not supposed to include margins either. And for the 'display:contents' issue, I was not able to reproduce:However, when changing display to
contentsfor a non-root element, all of the methods, includingscrollHeight, seemed to fail:All I can really say with 100% certainty is this stuff is complicated! I found this interesting thread from the Google AMP project which shows how even the "big guys" have trouble with this.
Yes, yes and yes. MDN is slightly lacking in this area, and you really need to read the actual specs.
First, on
display:contents, I specfically said the "computed value" because the relevant spec says "The root element’s display type is always blockified. Additionally, a display of contents computes to block on the root element."Second, on the matter of margins, it differs depending on whether we're dealing with the root element or not. Step 4 of the rules for the calculation of the scrollHeight say that the root element is treated specially. It says that "If the element is the root element and document is not in quirks mode return max(viewport scrolling area height, viewport height)." The calculation of the viewport scrolling area is quite detailed but an abbreviation for the bottom edge says it's "The bottom-most edge of the bottom edge of the initial containing block and the bottom margin edge of all of the viewport’s descendants' boxes." (my emphasis) Note that the initial containing block itself doesn't have margins.
If you compare that with the rules for other elements, then you see that the margins of the target element are not counted, but the margins of its descendant boxes are counted.
Thanks for the clarification! Much appreciated since the specs can be rather dense and hard to understand at a glance.