angular - 使用工具栏强制 Angular Material sidenav 容器填充高度

Question

我无法让 Angular Material sidenav 容器填充屏幕的高度。sidenav 以及 sidenav 内容与适合其内容所需的高度一样高。我想让它的高度填满屏幕。

导航组件的 HTML：

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    *ngIf="isHandset$ | async">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
    <span>Title</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" 
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false"
      (click)="closeDrawerIfHandset(drawer)">
      <mat-nav-list>
        <a mat-list-item routerLink="/">Home</a>
        <a mat-list-item routerLink="/link1">Link1</a>
      </mat-nav-list>
  </mat-sidenav> 
  <mat-sidenav-content>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

父（根）组件的 HTML：

<main-nav>
    <router-outlet></router-outlet>
</main-nav>

我并没有真正应用 CSS：

.sidenav {
  width: 200px;
}

这是它的样子：

我已经尝试将 mat-sidenav-container 设置为全屏，但这会隐藏 mat-toolbar。当我将容器设置为具有“顶部：”以便再次显示工具栏时，滚动不足以显示整个页面内容。

Stackblitz 示例：https ://stackblitz.com/edit/angular-mcbhqt-r7kmlw

Answer 1

我有同样的问题。这个解决方案对我有用

html, body, .material-app, .mat-sidenav-container {
  height: 100%;
  width: 100%;
}

归功于此答案https://stackoverflow.com/a/51497445/11350563