jquery назначает неправильную высоту элемента с свойством border-size: border-box

Question

У меня есть элемент с произвольной высотой. Элемент имеет свойства box-size: border-box. Если при использовании jquery назначить высоту 100 пикселей, результатом будет высота элемента равна 120. Что может быть неправильным?

ЯШ:

$('#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 1

height() функция устанавливает только высоту элемента, если вы хотите установить общую высоту , включая обивку, границы и края в качестве 100 затем используйте outerHeight()

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

С помощью height() вы вынуждаете JQuery установить высоту самого элемента, как 100 и вот почему, даже если вы используете box-sizing: border-box, оно не имеет никакого значения.

Для дальнейшей ссылки: http://api.jquery.com/outerheight/

Я надеюсь, что это помогает