javascript - 在 Angular2 中设置距离另一个元素的元素高度

Question

我在包含动态内容的部分中有两个 div。左侧容器包含一个数字列表和另一个输入字段列表。如果输入字段的容器延伸到 600 像素的高度，我需要优先考虑该容器，我需要在数字容器上具有该高度，然后如果该元素的长度超过 600 像素，则该元素会进入单独的滚动。

Example img

Code example

<section>
  <div class="numbers">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>

  </div>
  <div class="inputs">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

  </div>

</section>

section {
  display: flex;
}
.numbers {
  margin-right: 50px;
}
.numbers div {
  background: black;
  height: 20px;
  width: 20px;
  margin-bottom: 10px;
  color: #fff;
}
.inputs {
  display: flex;
  flex-direction: column;
}
  input {
    margin-bottom: 20px;
  }

Answer 1

这是我对这个问题的解决方案，我创建了一个在 Oninit 中调用的函数以及更新内容的每个按钮，在 html 上我将其称为 [style.height.px]="elHeight - 100"

这是我的 typescript 代码

  getHeight() {
        const leftEl = document.getElementById('number-col');
        const rightEl = document.getElementById('question-col');

        setTimeout(() => {
          this.elHeight = rightEl.clientHeight;
        }, 100);


      }