我有一个mat-grid-tile（父级）包含一个组件app-window（子），其中包含mat-card在其根源。
The app-window填充mat-grid-tile根据需要并且垂直和水平居中对齐。现在我想要app-window's mat-card做同样的事情，这样我就可以有一个等距的网格mat-cards.
我怎样才能得到mat-card包含在app-window来填满整个app-window？我尝试过一些想法，但没有成功；更多详细信息如下。
StackBlitz 示例 https://stackblitz.com/edit/angular-3zvypv
组件 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的宽度为width and height100%。这使得mat-card稍大于mat-grid-tile包含它的。期望的行为是匹配的大小app-window.
- 不分配任何额外的 CSS 属性给
mat-card。结果，mat-card占据app-window的整个宽度，但仅与其内容一样高。我希望它始终与app-window.
- 分配财产
flex-grow: 1; to the mat-card。根据我的理解，这应该使mat-card填满整个空间app-window，即它的父容器。但没有效果，结果与第二种方案相同。
希望您现在已经弄清楚了这一点，但我将向可能遇到类似问题的其他人提供此解决方案。
原因height:100%;延伸超过父容器是mat-card box-sizing财产是content-box默认情况下。如果您将其设置为border-box它将减去填充，同时确定填充父级的大小。
以下内容应该适合您：
app-window mat-card{
width: 100%;
height: 100%;
box-sizing: border-box;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
