Div высоты не совпадают после установки равных высот с помощью javascript

Question

У меня есть два divs, которые я хотел бы иметь равную длину. Div1 имеет в нем текст, который определяет его высоту. Div2 - это окно с прокруткой, которое должно иметь видимую высоту так же, как div1. Следующий код

<script> 
    var div1Height = ((document.getElementById('div1').offsetHeight) + 'px'); 
    document.getElementById('div2').style.height = div1Height; 
    </script> 

делает div2 почти такой же высоты, как и div1, но не совсем. Я подозревал, что после запуска скрипта есть пробел или маржа, но после удаления всех этих двух высот все еще не совпадают. Есть ли способ исправить это?

Answer 1

Вы используете два разных способа измерения высот. В div1 yo используйте offsetHeight и в div2 вы используете style.height.

Изменить

var div1Height = ((document.getElementById('div1').offsetHeight) + 'px'); 

в

var div1Height = ((document.getElementById('div1').style.height) + 'px'); 

Тогда вы будете иметь то же значение, потому что вы используете один и тот же способ измерения.

Обратите внимание, что вы установили style = "height: [x] px;" на div1, чтобы это работало, потому что style.height извлекает (высоту) информацию из атрибута style элемента.

Я не знаю, почему вы делаете это в javascript. Возможно, у вас есть свои причины, но чистый css будет почти наверняка работать (в зависимости от того, чего вы хотите достичь, конечно)