странное поведение elem.scrollHeight'а

264

23 августа 2017, 19:53

Есть такой стиль:

width: 300px;
height: 200px;
margin: 25px;
padding: 20px;
border: 25px solid #777;
overflow: auto;

Элемент: <div id="test">lorem100</div>

var test = document.getElementById("test");
console.log(test.scrollHeight);  // 400
test.style.height = test.scrollHeight + "px";
console.log(test.scrollHeight);  // 440

Ну и вопрос: откуда берутся ещё 40 пикселей, после того как мы разворачиваем элемент на всю высоту?

Тут как-то замешан padding. Потому что если его убрать - будет 360 и 360. То есть какого-то лешего padding добавляется дважды. Кто знает - почему и зачем?

Answer 1

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока.

Если хотите изменить алгоритм расчёта, используйте св-во box-sizing

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box - Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box - Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
padding-box - Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).

UPD

scrollHeight - полная внутренняя высота, включая прокрученную область

Изначально у вас есть некая высота height допустим 200 и padding равный 20.
При выводе console.log(test.scrollHeight); вы получаете высота + (padding * 2) т.е. 240
После того как вы присвоили элементу новую высоту, уже суммированную автоматически браузером, т.е. 240 вы получаете на вывод через log новую суммированную высоту, т.е. 240 + padding * 2 = 280