时间戳

首页 > 解决方案 > 从Angular2中的另一个元素设置元素高度

javascript - 从Angular2中的另一个元素设置元素高度

问题描述

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

示例图片

代码示例

<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;
  }

标签： javascriptcssangular

解决方案

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

这是我的打字稿代码

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

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


      }

推荐阅读