当在角度6中增加指示器项目数时，垫子台高度增加

Question

我是Angular 6的新手，这里正在为我的应用程序使用Material设计。

问题是，当增加Pagnator中的项目数时，也会增加席子桌子的高度。

我想做的是，当我增加指示器的数量时，我想启用表格中的滚动条而不是增加其高度。

项目数为10的图片：

项目数为25的图片：

app.component.html

<div class="col-sm-7">
        <div class="row">

          <mat-card class="col-sm-12" style="margin-top:50px;overflow: hidden">

                  <mat-card class="searchBox" style="position:sticky;padding: 8px">
                    <mat-form-field class="col-sm-12">
                      <mat-label>Search</mat-label>
                      <input matInput (keyup)="filterService($event.target.value)" placeholder="Search...">
                    </mat-form-field>
                  </mat-card>


                  <div style="overflow-y: scroll"> 
                    <table mat-table [dataSource]="dataSource" matSort>

                      <ng-container matColumnDef="CSER_ID">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> S.No </th>
                        <td  mat-cell *matCellDef="let service"> {{service.CSER_ID}} </td>
                      </ng-container>

                      <ng-container matColumnDef="CSER_NAME">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Service Title </th>
                        <td  mat-cell *matCellDef="let service"> {{service.CSER_NAME}} </td>
                      </ng-container>

                      <ng-container matColumnDef="CSER_DAY">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
                        <td  mat-cell *matCellDef="let service"> {{service.CSER_DAY}} </td>
                      </ng-container>

                      <ng-container matColumnDef="CSER_TIME">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Time </th>
                        <td  mat-cell *matCellDef="let service"> {{service.CSER_TIME}} </td>
                      </ng-container>

                      <ng-container matColumnDef="CSER_STATUS">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
                        <td mat-cell *matCellDef="let service"> {{service.CSER_STATUS}} </td>
                      </ng-container>

                      <ng-container matColumnDef="ACTION">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
                        <td  mat-cell *matCellDef="let service">
                          <span (click)="editServiceData(service.CSER_ID)" class="cursor" matTooltip="Edit"><i class="material-icons">border_color</i></span>
                        </td>
                      </ng-container>

                      <tr mat-header-row class="mat-header-row" style="height:45px" *matHeaderRowDef="displayColumns"></tr>
                      <tr mat-row style="height:35px" *matRowDef="let row; columns: displayColumns;"></tr>

                    </table>
                  </div>
                  <mat-paginator class="mat-paginator-sticky " [pageSizeOptions]="[10,25,50,100]" showFirstLastButtons></mat-paginator>

          </mat-card>

        </div>
      </div>

app.component.css

.table {
    width: 100%;
    overflow: auto;
    flex-grow: 1;
  }

  .mat-form-field {
    font-size: 14px;
    width: 100%;
  }

  .td, th {
    width: 25%;
  }

  .colHeaderStyle{
    font-weight: bold;
    font-size: 14px;
    color:#FFFFFF;
    background: #212529;
  }
  .mat-row:nth-child(even){
    background-color:#f2f4f7;
    }

  .mat-row:nth-child(odd){
    background-color:none;
    }
  .searchBox{
    padding:10px;
    padding-bottom:5px;
  }
  .material-icons {
    font-size: 15px !important;
  }
  .mat-row:hover {
    background-color: #93E7FB;
  }
  .mat-paginator-sticky {
    bottom: 0px;
    position: sticky;
    z-index: 10;
  }

谁能帮我解决这个问题。