Пересчитывать значение переменной каждый раз при изменении размеров окна?

Question

У меня есть скрипт, который при загрузке страницы вычисляет высоту элемента infoproduct и делает высоту productbaner равной этому значению. Я хочу, чтобы при изменении размеров окна высота infoproduct пересчитывалась, но каждый раз, когда размер окна меняется, значение становится все больше и больше. Подскажите, в чем моя ошибка?

window.onresize = func;
window.onload = func;
function func() {
    const infoproductHeight = document.getElementById('infoproduct').scrollHeight;
    console.log(infoproductHeight);
    const productbaner = document.getElementById('productbaner');
    productbaner.style.height = infoproductHeight+'px';
}

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.productbaner {
    padding: 3% 5% 5% 5%;
    min-height: 250px;
    position: relative;
     min-height: 300px;
}

.infoproduct {
  padding: 3% 5% 5rem 5%;
}

#infoproduct {
    background: rgba(20,150,240,.7);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 4.5rem 3%;
    color: #fff;
}

<div class="productbaner" id="productbaner">
<div class="infoproduct "id="infoproduct">
 Здесь какой-то контент здесь какой-то контент здесь какой-то контент здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  здесь какой-то контент  
</div>
 </div>

Answer 1

Это не ошибка, у вас в вёрстке infoproduct находится внутри productbaner-а и когда вы устанавливаете высоту infoproduct-а то меняется высота не только productbaner-а но и самого infoproduct-а, потому что он находится в нём. Если вы напишите раздельно вот так:

<div class="productbaner" id="productbaner"> </div>
<div class="infoproduct "id="infoproduct"> SOME TEXT </div>

то у вас получится корректная обработка высоты и пропадёт бесконенчное увелечение высоты

Answer 2

В моем случае необходимо было, чтобы структура была именно такой, как в примере, решил проблему исправлением скрипта (при изменении размера окна сначала устанавливаю высоту родительского элемента равной 100% и потом выполняю все остальное):

window.onresize = func;
window.onload = func;
function func() {
    const productbaner = document.getElementById('productbaner');
    productbaner.style.height = '100%';
    const infoproductHeight = document.getElementById('infoproduct').scrollHeight;
    console.log(infoproductHeight);
    productbaner.style.height = infoproductHeight+'px';
}

БЛОГ НА HUSL

Пересчитывать значение переменной каждый раз при изменении размеров окна?

Ответы (2 шт):