jquery appoints the wrong height of an element with property border-size: border-box

Question

I have an element with an arbitrary height. Element have properties box-sizing: border-box. If using jquery appoint 100px height, the result would be the height of the element is equal to 120. What could be wrong?

js:

$('#element').height(100);

css:

#element{
    background-color: green;
    height: 50px;
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
}

https://jsfiddle.net/yurri_87/8sLovkba/

Please mark answer as accepted if it solved your confusion to close this thread. — Abhay Maurya, Nov 23 '16 at 11:51

Abhay Maurya · Accepted Answer · 2016-11-23T11:43:33.930

height() function only sets height of element, if you want to set total height including padding, border and margin as 100 then use outerHeight()

$('#element').outerHeight(100);

By using height() you are forcing jQuery to set height of element itself as 100 and thats why even if you use box-sizing: border-box , it wont make any difference.

For further reference: http://api.jquery.com/outerheight/

I hope it helps

jquery appoints the wrong height of an element with property border-size: border-box

1 Answers1