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.
border
andpadding
on each element when the element has box-sizing: border-box."