如何修复Angular2中md-grid-list中md-card的高度？

Posted 2023-02-22

【中文标题】如何修复Angular2中md-grid-list中md-card的高度？

【英文标题】：How to fix the height of the md-card inside md-grid-list in Angular2?

【发布时间】：2017-10-07 11:57:18

【问题描述】：

我正在使用"@angular/material": "2.0.0-beta.2" 版本。为了显示图块，我在md-grid-list 中使用了md-card。我已将属性rowHeight 添加到md-grid-list。即使定义了rowHeight，行中的卡片的高度也不相同。我需要与 md-card 一起使用什么属性才能使行中的所有卡片具有相同的高度？

<md-grid-list cols="4"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of myData">
      <md-card [style.background]="'lightblue'">    
    <md-card-title></md-card-title>
    <md-card-title></md-card-title>
    <md-card-content>
    <h2>    
    </h2>
    </md-card-content>  
    </md-card>
  </md-grid-tile>
</md-grid-list>

【参考方案1】：

在md-card 上设置100% minHeight 属性以仅调整高度并设置minwidth 也以填充md-grid-tile

喜欢：

[style.minHeight]="'100%'" [style.minWidth]="'100%'"

例如，请参阅Plunker。

【讨论】：

@user1731770：您可以接受这个作为答案吗？如果帮助了你。 :)