设置两个独立 angularjs 组件的高度相等
Set equal height of two independent angularjs components
我有两个 angularjs 组件显示垂直平行放置在页面上的不同内容 -
我需要将两个组件的高度设置为相等。因此,如果根据组件 A 显示的内容,组件 A 的高度大于组件 B 的高度,我需要将组件 B 的高度增加到等于组件 A 的高度。
此外,每当任何组件的 content/height 增加时,我都需要重新调整其他组件的高度。
我尝试使用 heightOffset 在 ng-init 上获取组件的高度,但始终获取值为 0。我也看过 ResizeObserver,但目前浏览器支持有限。
还有其他方法可以实现所需的行为吗?
这完全可以用 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 组件显示垂直平行放置在页面上的不同内容 -
我需要将两个组件的高度设置为相等。因此,如果根据组件 A 显示的内容,组件 A 的高度大于组件 B 的高度,我需要将组件 B 的高度增加到等于组件 A 的高度。 此外,每当任何组件的 content/height 增加时,我都需要重新调整其他组件的高度。
我尝试使用 heightOffset 在 ng-init 上获取组件的高度,但始终获取值为 0。我也看过 ResizeObserver,但目前浏览器支持有限。
还有其他方法可以实现所需的行为吗?
这完全可以用 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>