JQuery: height () for frame

Question

It is outlined in the jQuery API :

Note that .hight () will always return the height of the content, regardless of the value of the CSS CSS dimension property. As in jQuery 1.8, this may require getting the CSS height property plus the window size and then subtracting any potential border and padding for each element when the element has a box size: border-box. To avoid this punishment, use .css ("height") rather than .height ().

I tried the following example

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

with 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()); 

will set boxA height to 50px (since the content height is 50 pixels), but I found that the height was set to 90 pixels. However, if I use

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

boxA height gets 50px and therefore shrinks. Why doesn't the first method produce 50px height?

In addition, the team

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

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

You can find these examples in this jFiddle .

Answer 1

JQuery API says

Note that .hight () will always return the height of the content, regardless of the value of the CSS size property.

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

Note that .hight (value) sets the height of the content of the field regardless of the value of the CSS size property.

So if you use

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

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

This also applies to your second example.

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

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

Therefore, everything is just fine.

Answer 2

It seems that .height() always measured using the content-box , but when applying a new value, it corresponds to box-sizing , so adding the measured value of the content-box to the rest of the settings has a border-box as an option.

If you change box-sizing from content-box to a demo, it will behave the same way (in all cases, 50px will be set for each window, and if the value is content-box all fields will have 90px).