Angular Material : making a mat-card fill an entire mat-grid-tile

Question

我想使用 mat-grid-list 创建一个网格列表布局，其中每个 mat-grid-tile 包含一个 mat-card 填充整个图 block ，而不管卡片的内容如何。大多数卡片需要占据多行和/或多列。到目前为止，我还无法让它工作。

我尝试过的事情:

• 使用选择器 mat-card 将每张卡片的 CSS width 和 height 设置为 100%。这会导致每张卡片填满整个屏幕，而不仅仅是包含卡片的 mat-grid-tile。
• 使用选择器 mat-grid-tile > mat-card 将每张卡片的 CSS width 和 height 设置为 100%。这与根本没有选择器具有相同的效果，因为卡片只是在它们的网格 block 中保持居中，这些网格 block 被包裹成各自内容的大小。
• 遵循 this question 中的代码.问题是属性 flex、layout-wrap 和 layout-fill 对我不可用，可能是因为示例代码正在使用Angular 2 而不是 4。

编辑:看来我误解了上面列出的第一次尝试的结果。这些卡片实际上只填充了 mat-grid-tile，但它们周围的阴影被瓷砖的边界切断了。

Answer 1

我不确定到底什么不适合你，但我刚刚在 stackblitz 中重新创建了你的场景，并为 mat-card 使用了以下样式:

mat-card {
  width: calc(100% - 70px);
  height: calc(100% - 70px);
}

这是 stackblitz 链接:https://stackblitz.com/edit/angular-eqs6cp?file=app%2Fapp.component.css

以防万一您(像我一样)担心对 css calc() 的支持，这里是支持的浏览器和版本:http://caniuse.com/#feat=calc

(答案已根据第一条评论更新)