Почему неправильно рассчитывается высота через Javascript?

Question

[eugene159]

Здравствуйте.
На словах не очень просто объяснить, поэтому я прикладываю скриншоты с пояснениями.
Вот ссылка на песочницу:
https://codepen.io/codepen_user_2020/pen/eYpPYKK

Comments

[Onzabr]

А зачем использовать JS для адаптивности? Для этой задачи прекрасно подойдут flexbox и медиа-запросы. Если нужны относительные от размера холста величины высоты/ширины, ознакомьтесь с vh и vw.

[Rustam Bainazarov]

А зачем тут JS? :))

[eugene159]

Onzabr, Рустам Байназаров, это урезанный пример. В реальной задаче без JS не обойтись.

Можете помочь разобраться, почему происходит то, что происходит? Я заметил, что если ставлю setTimeout 0 или 50, у меня не работает. А 100 - работает.

100 будет работать везде? Или на некоторых компах - нет?

Answer 1

[Evanescing]

Есть ли необходимость использования скрипта для рассчета параметров блоков?
Проблема в логике js. Высота блока = 181px, он и устанавливается как фиксированная высота.
Попробуйте поставить в верстке блоку class="product" style="height: auto;" и сложные рассчеты не должны понадобиться.

Comments

[eugene159]

Это урезанный пример. В реальной задаче без JS не обойтись.

Можете помочь разобраться, почему происходит то, что происходит? Я заметил, что если ставлю setTimeout 0 или 50, у меня не работает. А 100 - работает.

100 будет работать везде? Или на некоторых компах - нет?

[Evanescing]

eugene159, вопрос заключается в том, нужны ли расчёты высоты, если при изменении ширины экрана, скрипт проходит по циклу и в итоге, если добавить else в проверку if переменной максимальной высоты > текущей, то всегда устанавливается высота else.
if (currHeight > maxHeight) {
maxHeight = currHeight;
}
else {
maxHeight="auto"; // срабатывает в рассматриваемых размерах экрана
}

[eugene159]

Evanescing, я убрал все лишнее из примера. Поэтому вы не понимаете, зачем там такие расчеты. Но понимание и не нужно, ведь я написал вопросы, на которые хотел бы получить ответы.

[Evanescing]

При перестраивании с 960 на 961 происходит перемещение кнопки Купить и ровно на эту старую величину блока под кнопку остаётся отступ. Следовательно, высота берётся до того как html структура перестраивается, отсюда привязка ко времени таймаута. Это время зависит от скорости чтения и обработки кода окружением, в котором работает скрипт.
Удачи в поиске решений!

[eugene159]

Evanescing, а есть в JS возможность или какой-нибудь способ выполнить код только после отрисовки? Если да, то можете назвать его?