jQuery: height() for a border-box

Question

Its stated in the jQuery API:

Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "height" ) rather than .height().

I tried the following example

<div id='wrapper' class='boxA'>
  <div class='boxB'>
    Test
  </div>
</div>

with the CSS

.boxA{
  padding: 20px;
  background-color: yellow;
  box-sizing: border-box;
  margin: 50px;
}

.boxB{
  height: 50px;
  background-color: red;
}

According to the jQUery API I was sure that

$('#wrapper').height($('#wrapper').height());

would set the height of boxA to 50px (since the content-height is 50px) but I found that the height was set to 90px. However if I use

$('#wrapper').css('height', $('#wrapper').height()+"px");

the height of boxA gets 50px and therefore shrinks. Why is the first method not producing 50px height as well?

Furthermore, the command

$('#wrapper').height($('#wrapper').css('height'));

will set the height of boxA to 130px but $('#wrapper').css('height') returns 90. What happened here?

You may find these examples in this jFiddle.

Answer 1

Looks like .height() is always measured by content-box, but when applying new value it respects box-sizing, so it's adding measured content-box value to rest of settings as box have border-box set up.

If you change box-sizing to content-box at demo, it will behave exactly like that (will in all cases set 50px to each box, and with content-box value all boxes will have 90px).

Answer 2

The jQuery API says

Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property.

This implies that $('#wrapper').height() is 50px (since content-height of boxA is 50px) and $('#wrapper').css('height') is 90px (because you have a top-padding of 20px and a bottom-padding of 20px) and for a border-box the height is given by content-height + padding + border. Furthermore the API states that

Note that .height(value) sets the content height of the box regardless of the value of the CSS box-sizing property.

Thus, if one uses

$('#wrapper').height($('#wrapper').height());

then the content-height will be set to 50px, but since you have a border-box this implies that height=90px ,because the height is content-height+padding+border (adding twice padding of 20px).

This also applies to your second example

$('#wrapper').height($('#wrapper').css('height'));

in order to change the content-height to 90px, the total height of your border-box must be 90px+20px+20px=130px.

Therefore, everything is just fine.