如何调整垫子桌子的高度,以使其填充剩余的垂直空间,并且任何多余的东西都可以滚动?

我在下面添加了一张图片,该图片可以更好地详细说明我的网页模型。

我有一个页面是Angular应用程序的一部分。在应用程序中,我有一个席子卡,该卡中有一个席子表,它可以显示一长串数据。

数据列表有时会导致Mat-card的高度超出页面的下边界,并且由于页面不可滚动,因此用户将无法访问大量行。

我希望能够将垫板卡的大小固定为页面高度减去页眉的高度,以便垫板卡填充页面上所有剩余的垂直空间。

我们正在使用引导程序,因此mat-card包含在col-8类中。

有没有一种方法可以将卡的高度设置为页面上的剩余高度,然后使表格主体中的任何溢出都可滚动?

我尝试将mat-table上的overflow-y设置为滚动,但是发生的只是滚动条出现,但没有提供实际滚动的功能。

The issue here is that the height of the mat-card varies, so if the container holding the table is height: 100%, it'll take up as much height as it requires to display the full length of the table. I need to force the card height to only take up the visible available height, and not the height it needs to display the table. Something like height: 100% available width

enter image description here

评论