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

Question

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

我需要将两个组件的高度设置为相等。因此，如果组件A的高度大于组件B的高度（基于组件A正在显示的内容），则需要将组件B的高度增加到等于组件A的高度。 此外，每当任何组件的内容/高度增加时，我再次需要重新调整其他组件的高度。

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

实现所需行为的其他任何方式？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;