html - 如何制作 Angular Material 卡以占用可用的垂直空间并使其内容可滚动

Question

我正在尝试让 Material 卡 (mat-card) 占用屏幕上的可用空间，然后使其内容 (mat-card-content) 可滚动，因为内容中的元素占用的空间比可用空间多。

我尝试使用以下 CSS，但这只是部分解决方案，因为我对内容使用了固定高度。

.mat-card-content {
    height: 620px;
    overflow: auto;
  }

这里的问题是不同的屏幕分辨率，所以在某些情况下它看起来不错，但在其他情况下会有很多可用的空白空间。

Answer 1

所以这就是我为解决它所做的:

.mat-card {
  height: 90% !important;
  position: relative;
  overflow: hidden;
}

.mat-card-content {
  max-height: 100%;
  position: absolute;
  overflow: auto;
}

这样我的垫卡将占用 90% 的可用空间，然后内容将占用垫卡的 100% 可用空间。这里的关键是将 mat-card 位置设置为 relative，将 mat-card-content 位置设置为 absolute。