Angular 4 - 如何使mat-card填充整个父组件区域

Question

我有一个mat-grid-tile（父级），其中包含一个组件app-window（子级），其根目录中包含mat-card。

app-window根据需要填充mat-grid-tile，并在垂直和水平方向上居中对齐。现在我希望app-window的{​​{1}}做同样的事情，这样我就可以拥有一个等间距mat-card的网格。

如何让mat-card中包含mat-card来填充整个app-window？我尝试了一些想法但没有一个成功;更多详情如下。

StackBlitz example

组件HTML：

app-window

组件CSS：

<mat-grid-list cols="3" rowHeight="4:3">
  <mat-grid-tile>
    <app-window></app-window>
  </mat-grid-tile>
</mat-grid-list>

尝试了解决方案及其结果：

• 将app-window { width: calc(100% - 10px); height: calc(100% - 10px); } 的{​​{1}}的宽度设置为app-window和mat-card的100％。这使width略大于包含它的height。期望的行为是匹配mat-card。
的大小
• 未向mat-grid-tile分配任何额外的CSS属性。因此，app-window占据mat-card的整个宽度，但仅与其内容一样高。我希望它始终与mat-card。
的高度相同
• 将属性app-window分配给app-window。根据我的理解，这应该使flex-grow: 1;填充mat-card的整个空间，即其父容器。但是，没有效果，结果与第二种解决方案相同。

Answer 1

希望你现在已经弄清楚这一点，但我会向可能会遇到类似问题的其他人提供此解决方案。

height:100%;延伸到父容器之后的原因是mat-card box-sizing属性默认为content-box。如果将其设置为border-box，它将在确定填充父级的大小时减去填充。

以下内容对您有用：

app-window mat-card{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}