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

Posted 2023-02-18

【中文标题】使用工具栏强制 Angular Material sidenav 容器填充高度

【英文标题】：Force Angular Material sidenav container with toolbar to fill height

【发布时间】：2020-01-02 02:46:39

【问题描述】：

我无法让 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

【参考方案1】：

我遇到了完全相同的问题。这个解决方案对我有用

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

感谢这个答案https://***.com/a/51497445/11350563

【讨论】：

对预期结果没有影响。