html - 如何使角度材质卡占用可用的垂直空间并使其内容可滚动

Question

我正在尝试使材料卡（mat-card）占用屏幕上的可用空间，然后使其内容（mat-card-content）可滚动，因为内容中的项目占用的空间比可用空间多。

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

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

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

标签： htmlcssangularangular-material-7

Answer 1

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

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

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

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