如何让PrimeNG的两个p-card组件高度对齐？

尝试让两个PrimeNG p-card 组件高度保持一致（较矮组件适配较高组件高度）时遇到问题，截图如下：

现有代码如下：

parent.component.html #

<div class="container">
  <div class="row">
    <div class="col-6">
      <homepage-card header_name="XX"></homepage-card>
    </div>
    <div class="col-6">
      <homepage-card header_name="YY"></homepage-card>
    </div>
  </div>
</div>

homepage-card.component.html #

<p-card>
  <ng-template pTemplate="header">
    <div class="header_style">
      {{ header_name }}
    </div>
  </ng-template>
  <div *ngIf="header_name == 'XX'; else yy_template">
    <progress-comp class="prog_bar" *ngFor="let item of import_name_xx" [item]="item"></progress-comp>
  </div>
  <ng-template #yy_template>
      <progress-comp class="prog_bar" *ngFor="let item of import_name_yy" [item]="item"></progress-comp>
  </ng-template>
  <ng-template pTemplate="footer">
    <p-button icon="pi pi-angle-double-down" label="Do"></p-button>
  </ng-template>
</p-card>

方法1：利用Bootstrap Flex等高特性 #

你使用了Bootstrap的row和col布局，可通过以下两步实现卡片等高：

1. 修改父组件row类
   给row添加align-items-stretch，让列自动拉伸至等高：

<div class="container">
  <div class="row align-items-stretch">
    <div class="col-6">
      <homepage-card header_name="XX"></homepage-card>
    </div>
    <div class="col-6">
      <homepage-card header_name="YY"></homepage-card>
    </div>
  </div>
</div>

2. 让卡片占满容器高度
   在homepage-card.component.css中添加样式，让p-card填充父容器，同时让内容区域自动撑满剩余空间，footer固定在底部：

:host ::ng-deep .p-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:host ::ng-deep .p-card-body {
  flex: 1;
}

方法2：自定义Flex布局 #

若不想依赖Bootstrap类，可直接给父容器设置flex属性：

<div class="container">
  <div class="row" style="display: flex;">
    <div class="col-6" style="display: flex;">
      <homepage-card header_name="XX"></homepage-card>
    </div>
    <div class="col-6" style="display: flex;">
      <homepage-card header_name="YY"></homepage-card>
    </div>
  </div>
</div>

同样搭配方法1中的卡片样式即可实现等高。

方法3：固定卡片高度（不推荐） #

若已知卡片最大高度，可直接给p-card设置固定高度，但这种方式灵活性差：

<p-card style="height: 400px;">
  <!-- 原有内容 -->
</p-card>

内容的提问来源于stack exchange，提问作者gipcu