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

Question

我无法获得Angular Material sidenav容器来填充屏幕高度。 sidenav以及sidenav的内容与满足其内容所需的内容一样高。 我要填充屏幕的高度。

导航组件的HTML：

query()

父（根）组件的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>

我实际上没有应用CSS：

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

它是这样的：

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

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