我如何将Mat-Sidenav的高度设置为100％

Question

我无法向下滚动到底部。我看不到下面的分页。我尝试在Mat-Sidenav-container上使用全屏，但我的Mat-Toolbar丢失了。如何根据我的内容设置Mat-Sidenav-content？您可以看到下图：

furear.component.html

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
      <mat-list class="mt-5">
          <mat-list-item><mat-icon class="me-2">book</mat-icon><a routerLink="/book">Book</a></mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item><mat-icon class="me-2">supervisor_account</mat-icon><a routerLink="/author">Author</a></mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item><mat-icon class="me-2">local_offer</mat-icon><a routerLink="/category">Category</a></mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item><mat-icon class="me-2">folder_shared</mat-icon><a routerLink="/publisher">Publisher</a></mat-list-item>
      </mat-list>
  </mat-sidenav>

  <!-- Main Content -->
  <mat-sidenav-content id="content">
    <mat-card class="header mat-elevation-z5">
      <mat-card-title class="mt-2">Author</mat-card-title>
      <button mat-raised-button color="warn" class="add-button" (click)="openAddModal()">Add new</button>
    </mat-card>
    
    <br>
    
    <div class="example-container float-end">
      <mat-form-field class="example-full-width" appearance="fill">
        <mat-label>Filter</mat-label>
        <input matInput placeholder="Search...">
      </mat-form-field>
    </div>

    <br>
    
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <!-- Price Column -->
        <ng-container matColumnDef="authorname">
          <th mat-header-cell *matHeaderCellDef> Author </th>
          <td mat-cell *matCellDef="let element"> {{element.authorname}} </td>
        </ng-container>
    
        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef> Actions </th>
            <td mat-cell *matCellDef="let element">
              <button mat-raised-button color="primary" (click)="updateClick()">Edit</button>
            </td>
        </ng-container>
      
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <mat-paginator class="mat-elevation-z5" [pageSize]="10" 
      [pageSizeOptions]="[10, 25, 50, 75, 100]" 
      showFirstLastButtons 
      aria-label="Select page">
    </mat-paginator>

  </mat-sidenav-content>
</mat-sidenav-container>

furear.component.css

#content {
    width: 82%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
    background: rgb(240, 237, 237);
}
mat-sidenav-container {
    height: 100%;
}
mat-sidenav {
    width: 18%;
    background-color: #fff;
}
mat-list-item a {
    text-decoration: none;
    color: #000;
}

Answer 1

您可以用：

overflow: auto;