Как установить высоту элемента CSS на основе случайно сгенерированной высоты другого элемента?

Question

Я пытаюсь создать постоянный разрыв в 100px между двумя «стенами», одна в верхней части экрана «wallTop», а другая в нижней части «wallBot», как в Flappy Bird.Я использовал Math.random в 'wallTop', чтобы рандомизировать его высоту, чтобы рандомизировать положение разрыва, но как мне установить высоту 'wallBot', которая будет основываться на рандомизированной высоте 'wallTop?

Вот что я пробовал

var wallGap = 100;
var wallTop = document.getElementById("wallTop");
var constant= (wallTop.height+wallGap);

$("#wallTop").css("height",Math.round(Math.random()*150+70)+"px");
$("#wallBot").css("height",450-constant+"px");

"450" ​​- это высота всего контейнера, поэтому я пытаюсь найти остаток после вычитания 'wallTop' и 'wallGap', чтобудет высота 'wallBot'.

Answer 1

Ваш constant не изменится магически после установки новой высоты для wallTop (также обратите внимание, что wallTop.height будет undefined, так как элемент не имеет свойства height).

    var wallGap = 100;
    var wallSpace = 450 - wallGap;
    var wallTop = $("#wallTop");
    var wallBot = $("#wallBot");

    wallTop.height(Math.round(Math.random()*150+70));
    wallBot.height(wallSpace - wallTop.height());