Как автоматически менять высоту одного блока в зависимости от высоты другого

Question

Всем привет. В JS ничего не понимаю. Но возникла необходимость менять высоту одного блока на странице в зависимости от высоты другого блока на этой же страницы. Я так понимаю это можно сделать только с помощью JS. Помогите кто может. Есть <div id="1"> и <div id="2">. У первого высота (height) меняется в зависимости от действий пользователя, а у второго в этот момент нижний отступ (margin-bottom) должен меняться и быть равным высоте первого. То есть если у первого высота 50px, то у второго нижний отступ 50px. Если у первого высота стала 100px, то и у второго отступ должен поменяться на 100px.

Код примерно такой:

<div id="1" style="height:auto;position:fixed;bottom:0;left:0;min-height:50px;">
    <textarea rows="10" cols="50"></textarea> 
</div>

<div id="2" style="margin-bottom:50px;"> Основной контент страницы </div>

Всё это надо, чтобы фиксированный блок не перекрывал основной контент.

Буду благодарен за помощь!

Answer 1

Как то так?

let x = 20
document.querySelector(".btn").onclick = ()=>{
  document.querySelector(".first").style.height = x +"px"
  x+=10
  document.querySelector(".second").style.marginBottom = x-10 +"px"
}

body{
display:flex;
align-items:flex-end;
}
.first{
width:70px;
height:20px;
background-color:gold;
}
.second{
width:70px;
height:20px;
margin-bottom:20px;
background-color:silver;
}

<div class = "first"></div>
<div class = "second"></div>
<button class = "btn">+</button>

Answer 2

вот + чтоб textarea подстраивала свою высоту под вводимый текст. Потому как если она не будет менять свою высоту, то и нечего следить за margin-ом ))

<body>
        <div
            id="1"
            style="
                height: auto;
                position: fixed;
                bottom: 0;
                left: 0;
                min-height: 50px;
                border: 2px solid green;
            "
        >
            <textarea id="myTextarea" cols="50" style="height: 50px"></textarea>
        </div>

        <div
            id="2"
            style="margin-bottom: 50px; font-size: 2em; border: 2px solid red"
        >
            Основной контент страницы <br />
        </div>

        <script>
            const myTextarea = document.getElementById("myTextarea");
            const myId1 = document.getElementById("1");
            const myId2 = document.getElementById("2");

            // прокрутить окно в самый низ 1 раз
            window.scrollTo(0, document.body.scrollHeight);

            // обработчик события в textarea
            myTextarea.addEventListener("keyup", function () {
                // чтобы textarea менялась по высоте вслед за вводимым текстом
                window.scrollTo(0, document.body.scrollHeight);
                if (this.scrollTop > 0) {
                    this.style.height = this.scrollHeight + "px";
                    myId1.style.height = this.style.height;
                }

                // правим высоту 2-го блока
                myId2.style.marginBottom = myId1.style.height;
            });
        </script>
    </body>

БЛОГ НА HUSL

Как автоматически менять высоту одного блока в зависимости от высоты другого

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