设置两个独立 angularjs 组件的高度相等

Question

我有两个 angularjs 组件显示垂直平行放置在页面上的不同内容 -

我需要将两个组件的高度设置为相等。因此，如果根据组件 A 显示的内容，组件 A 的高度大于组件 B 的高度，我需要将组件 B 的高度增加到等于组件 A 的高度。此外，每当任何组件的 content/height 增加时，我都需要重新调整其他组件的高度。

我尝试使用 heightOffset 在 ng-init 上获取组件的高度，但始终获取值为 0。我也看过 ResizeObserver，但目前浏览器支持有限。

还有其他方法可以实现所需的行为吗？

Answer 1

这完全可以用 css 来解决。您可以将 flex-box 与 align-items: stretch; 一起使用。查看 here 了解更多信息。

#container {
  display: flex;
  align-items: stretch;
}

#left {
  display: flex;
  flex-grow: 1;
  border: 1px solid #999;
  min-height: 10px;
}

#right {
  display: flex;
  flex-grow: 1;
  border: 1px solid #999;
  min-height: 10px;
}

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

<br>

<button onclick="document.getElementById('left').innerHTML += 'New line<br>'">Add new line to left</button>
<button onclick="document.getElementById('right').innerHTML += 'New line<br>'">Add new line to right</button>

设置两个独立 angularjs 组件的高度相等

Set equal height of two independent angularjs components

angularjs

twitter-bootstrap-3

resize

height

angular-components