Angular 4 - 如何使垫卡填充整个父组件区域

Posted 2023-03-07

【中文标题】Angular 4 - 如何使垫卡填充整个父组件区域

【英文标题】：Angular 4 - how to make a mat-card fill entire parent component area

【发布时间】：2018-06-04 18:24:37

【问题描述】：

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

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

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

StackBlitz example

组件 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 的mat-card 的宽度设置为width 和height 的100%。这使得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 的整个空间，即它的父容器。但是，没有任何效果，结果与第二种解决方案相同。

【问题讨论】：

您似乎需要 CSS 帮助。 CSS 不太关心您使用什么来生成最终标记。现在你需要一个熟悉 Angular 4 和 CSS 的人来回答你的问题。此外，他们需要通过创建minimal reproducible example 来对其进行测试。如果您自己创建它，链接所需的资源来重现问题，任何具有足够 CSS 知识的人都可以通过检查 sn-p 中的结果来提供帮助，即使他们不了解 Angular 4 以及它是如何构建的标记。

@AndreiGheorghiu 问题已更新为我的问题的 StackBlitz 示例。

【参考方案1】：

希望您现在已经解决了这个问题，但我会将此解决方案提供给可能遇到类似问题的其他人。

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

以下内容应该适合您：

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