Search code examples
jquerycssborder-boxbox-sizing

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/

Solution

  • 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