Высота div с дочерним краем

У меня есть 2 divs, и я хочу сделать их рост равным:

var highestCol = $('#SecondColumn').height(); $('.column').first().height(highestCol); 

Я знаю, что второй div всегда выше первого. Когда в обоих div есть простой текст, все работает нормально. Но после добавления divs с некоторым запасом или добавлением во второй div (всегда выше) вычисление ломается. Он занимает высоту выше div, но игнорирует сумму всех полей дочерних div внутри второго столбца.

Как я могу рассчитать полный div с полями / paddings?

Я думаю, вы хотите, чтобы outerHeight(true) а не «height ()», включал поля / paddings.

«Истина» относится к включению полей или нет.

Я думаю, что Он имел в виду, что происходит, когда первый и / или последний дочерний элемент элемента имеют значения нижнего / верхнего поля. Это особенно часто встречается с тегами абзацев, так как они имеют нижний край и верх 1em. Это согласуется с коллапсирующими полями, указанными в спецификации модели коробки

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

В этом случае jQuery сообщает externalHeight для родительского элемента, который не учитывает верхний край первого дочернего элемента и нижний край последнего дочернего элемента.

Решение для этого состоит в том, чтобы установить нижнее / верхнее поле для родительского элемента и нижнее / верхнее заполнение, чтобы сохранить согласованность с естественной высотой элемента:

 .parent-element{ padding-top: 1px; margin-top: -1px; padding-bottom: 1px; margin-bottom: -1px; } 

попробуй это:

 var highestCol = $('#SecondColumn')[0].offsetHeight; $('.column').first().height(highestCol);