css - 表格/卡片填满屏幕的剩余部分

Question

默认显示前 10 条记录，表格下方有几英寸的空白。

我该如何修改它，以便卡片/表格占据屏幕的其余部分并且分页链接位于最底部？

<mat-card>
<mat-card-content>
<table mat-table [dataSource]="dataSource" matSort matSortStart="desc" class="mat-elevation-z6">
  <ng-container matColumnDef="virtualMachineName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      Virtual Machine Name
    </th>
    <td mat-cell *matCellDef="let element">{{ element.virtualMachineName }}</td>
  </ng-container>

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
    <td mat-cell *matCellDef="let element">{{ element.status }}</td>
  </ng-container>

  <ng-container matColumnDef="labName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Lab Name</th>
    <td mat-cell *matCellDef="let element">{{ element.labName }}</td>
  </ng-container>

  <ng-container matColumnDef="instance">
    <th mat-header-cell *matHeaderCellDef>Instance</th>
    <td mat-cell *matCellDef="let element">{{ element.instance }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

<mat-paginator
  [pageSize]="10"
  [pageSizeOptions]="[10, 25, 50, 100]"
></mat-paginator>
</mat-card-content>
</mat-card>

标签： cssangular-materialangular7