angular - 强制带有工具栏的 Angular Material 侧导航容器填充高度

Question

我无法让 Angular Material 侧导航容器填充屏幕的高度。侧导航以及侧导航内容的高度正好适合其内容。 我想让它的高度填满屏幕。

导航组件的 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-工具栏。当我将容器设置为“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