Юрий Жулин Юрий Жулин - 14 days ago 5
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?

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/

Answer

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