我在使兩個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>

兩張卡都在你的行容器中。給這個div一個最小高度。然后在你的采購卡周圍使用另一個div，并將高度設置為100%。

<div class="container">
  <div class="row" style="min-height: 20vh">
    <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>

<div style="height: 100%">
  <p-card ...
  </p-card>
</div>