Юрий Жулин Юрий Жулин - 1 month ago 9
CSS Question

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

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?




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



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


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