Question 178703 in Html Question posted in
Some basic documentation can be found here.

Why client height vs offset height are different of html element?

enter image description hereWhy client height vs offset height are different of html element?
It is strange for me.

I mean I’m interested difference between client height vs offset height of HTML Element not just what they mean globally.

Tags:

2

Answers


  1. 0

    client height = the height of an element + the vertical padding

    clientheight does not include scrollbar, margin or border.

    while on the other hand

    offset height = the height of the element + the vertical padding + the top and bottom borders + the horizontal scrollbar (if it's available)

    offsetheight includes scrollbar , margin and border.

    Login or Signup to reply.
  2. 0

    The linked Q&A in the comments does not explain this well, and focusses mostly on the general difference between the heights. However, the accepted answer does itself link to a MDN page which does mention the relevant matter.

    You are right, the root element (i.e. the <html> element in a valid HTML document) is special.

    The first thing to understand is that the height of the root element is not, by default, the height of the viewport (unless the document is in quirks mode). The height of the root element by default is "auto", which means the height of the in-flow content that it contains.

    So the definition of offsetHeight says

    The offsetHeight attribute must return the result of running these steps:

    1. If the element does not have any associated CSS layout box return zero and terminate this algorithm.

    2. Return the border edge height of the first CSS layout box associated with the element, ignoring any transforms that apply to the element and its ancestors.

    This then is simple, it’s the height of the <html> element’s border box.

    However, the definition of clientHeight says

    The clientHeight attribute must run these steps:

    1. If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.

    2. If the element is the root element and the element’s node document is not in quirks mode, or if the element is the HTML body element and the element’s node document is in quirks mode, return the viewport height excluding the size of a rendered scroll bar (if any).

    3. Return the height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.

    So the clientHeight of the <html> element is not the height of its padding box as it is with other elements, but the height of the viewport. Which accounts for the large difference you see.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search