将 mat-card 放入 mat-grid-list答案

【问题标题】：Fit mat-card into mat-grid-list将 mat-card 放入 mat-grid-list
【发布时间】：2021-10-31 01:54:39
【问题描述】：

我正在构建一个带有卡片网格的 Angular 网页。为此，我使用了mat-grid-list，其中包含许多mat-grid-tile 组件。每个图块内都有一个mat-card。

这是stackblitz 上的一个最小示例

我希望每张卡片都精确地填充其自己的父图块。

【问题讨论】：

【解决方案1】：

只需将height: 100% 添加到mat-card：

mat-card {
  height: 100%;
}

【讨论】：

【解决方案2】：

只需在 css 中更改：

mat-card {
  border: 4px solid green;
  width: 100%;
  height: 100%-5;
}

到这里：

mat-card {
  border: 4px solid green;
  width: 100%;
  height: calc(100% - 5px);
}

如果你想在 css 中进行数学运算，你可以使用 calc() 函数。

【讨论】：