Why offsetHeight is smaller than clientHeight?

Question

FACTS:

clientHeight: Returns the height of an element, including padding

offsetHeight: Returns the height of an element, including padding, border and scrollbar

Conclusion:

offsetHeight should return more pixels than clientHeight. offsetHeight is bigger than clientHeight.

Question:

When I use these two properties on HTML tag, it returns 8 from offsetHeight and 778 from clientHeight.

Why's that? offsetHeight should be bigger than clientHeight, shouldn't it?

Then why is it only 8 pixels? What's happening here?

Code:

<!DOCTYPE html> <html id = "foo"> <body> <script> var element = document.getElementById('foo'); var osHeight = element.offsetHeight; var cHeight = element.clientHeight; document.write("Offset Height is " + osHeight + "<br/>"); document.write("Client Height is " + cHeight); </script> </body> </html>

Output:

Offset Height is 8 Client Height is 778

It's because you're partially wrong, and because you're checking the html element. There is nothing taking up space in the document, and you haven't set a height, so the height is really just 8 pixels, like offsetHeight returns, but clientHeight is returning the visible height of the document, which is different. — adeneo
– adeneo, Commented Nov 27, 2014 at 16:17

Alien · Accepted Answer · 2014-11-27 16:28:58Z

the clientHeight property is special for the html element. It returns the height of the browser's client area without the horizontal scrollbar for any doctype.

If no doctype is specified, the clientHeight property of the html element contains different values in the browsers.

detail:http://help.dottoro.com/ljcadejj.php

the offsetHeight property is special for the html element.

It returns the height of the browser's client area without the horizontal scrollbar in Internet Explorer like the clientHeight property of the html element.

In Firefox, Opera, Google Chrome and Safari, it returns the total height of the document.

detail: http://help.dottoro.com/ljuxqbfx.php

if you set *{padding:0px;margin:0px;} in css, offsetHeight will return 0 ;

http://jsfiddle.net/ufxt5Lzq/1/

ArinCool · Accepted Answer · 2014-11-27 16:17:44Z

0

Here, the client height is the height of the browser window. But since your html code is empty (i.e. it does not have any content), hence the offset height is 8 which is only the height of the area occupied by the <html> tag.

answered Nov 27, 2014 at 16:17

ArinCool

1,7581 gold badge13 silver badges24 bronze badges

3 Comments

Vipulcoolrule Over a year ago

Do you know why is it 8 pixels in all browsers? Any specific reason for this?

ArinCool Over a year ago

It is due to the margin property in <body>. Set margin:0; style for <body> and the offset height will appear as 0.

Vipulcoolrule Over a year ago

Add your margin comment in original post and it will make a nice answer. :)

ElDoRado1239 · Accepted Answer · 2014-11-27 16:21:40Z

0

Isn't it a browser issue...? This is the output from Maxthon 4.4.3.2000 console. I ran the code on this page.

Maxthon 4.4.3.2000

edited Nov 27, 2014 at 16:21

answered Nov 27, 2014 at 16:12

ElDoRado1239

4,0582 gold badges18 silver badges14 bronze badges

2 Comments

Vipulcoolrule Over a year ago

I tried in Google Chrome. And same thing in Internet Explorer. It's 8 pixels. You try to do it on HTML tag and please let me know what comes sir.

ElDoRado1239 Over a year ago

Of course. This is the result: document.body.parentNode.offsetHeight:2791, document.body.parentNode.clientHeight:558 And when I copied your code and opened it, it shows 8, 0. Upon reloading the clientHeight gets to 943.

Edward Coyle Jr. · Accepted Answer · 2014-11-27 16:45:40Z

As stated by some of the other answers here, you're checking the height of a blank HTML element with no style customizations, so the clientHeight and offsetHeight are going to be the same regardless. The content you're writing to the element are not inserted until after the document is loaded and the heights are checked, therefore producing a weird result.

Take a look at this JSFiddle. I've set up a check on an element that has content and a border. You are indeed correct that offsetHeight is larger.

If you need to do checks on an element's size, height or width, you need to do these checks after you've manipulated the innerHTML, or you won't get an accurate result because you're checking the original element size instead of the manipulated element size.

CSS:

#foo { border: 3px solid #000; height: 24px; padding: 6px; margin: 6px; overflow: scroll; }

HTML:

<div id="foo"> Guess my height?<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </div> <div id="height"></div>

JS:

function writeLn(content) { document.getElementById('height').innerHTML += content + '<br />'; } function showHeights() { var element = document.getElementById('foo'); var osHeight = element.offsetHeight; var cHeight = element.clientHeight; writeLn('element.offsetHeight = ' + osHeight); writeLn('element.clientHeight = ' + cHeight); } showHeights();

Right. It works fine with other tags. But on HTML tag, it doesn't work as expected. I tried to do that thing in my code and still the offsetHeight is smaller. It has increased by 36 pixels because of 2 lines. That's it. But thanks because your answer cleared a different confusion I had about the content stuff. And as Cattla mentioned, these properties are special for HTML tag. So that's why it is smaller than clientHeight. :)

Collectives™ on Stack Overflow

Why offsetHeight is smaller than clientHeight?

4 Answers 4

Comments

3 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

1 Comment

Related