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

Question

我有一个mat-grid-tile(父)包含一个组件app-window(子),mat-card它的根目录包含一个.

根据需要app-window填充,mat-grid-tile并在垂直和水平方向上居中对齐.现在我想app-window的mat-card做同样的,这样我可以有等距的网格mat-card秒.

我怎样才能获得mat-card包含在app-window填满整个app-window？我尝试了一些想法但没有一个成功; 更多细节如下.

StackBlitz的例子

组件HTML:

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

组件CSS:

app-window {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

尝试过的解决方案及其结果:

• 将app-window's mat-card的宽度设置为a width和height100%.这mat-card比稍微大mat-grid-tile一点.期望的行为将是匹配的大小app-window.
• 没有为其分配任何额外的CSS属性mat-card.结果,它mat-card占据了app-window整个宽度,但仅与其内容一样高.我希望它始终与高度相同app-window.
• 将属性分配flex-grow: 1;给mat-card.根据我的理解,这应该mat-card填充整个空间app-window,即其父容器.但是,没有效果,结果与第二种解决方案相同.

Answer 1

希望你现在已经想到了这一点,但我会向可能会遇到类似问题的其他人提供这个解决方案.

height:100%;超出父容器的原因mat-card box-sizing是content-box默认情况下属性.如果将其设置为border-box,则会在确定填充父级的大小时减去填充.

以下内容对您有用:

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