angular-material - Angular 9 - sidenav 仅占用内容的高度

Question

我浏览了整个论坛，试图找到解决方案。

我的问题很简单，mat-sidenav并没有拉直整个空高度，只占据内容高度。

<div class="main-container" fullscreen>
  <div class="main-banner">
    <button (click)='menuBar.toggle()'>XYZ</button>
    <h1 class='banner-manners'>THIS IS IMPORTANT MESSAGE AREA</h1>
  </div>
  <mat-sidenav-container>
    <mat-sidenav #menuBar mode='over' class="menu-container">
      <app-menu></app-menu>
    </mat-sidenav>
    <mat-sidenav-content class="content-container">
      <app-kushman></app-kushman>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

Answer 1

<div class="main-container">
  <mat-sidenav-container fullscreen>
    <mat-sidenav #menuBar mode='over' class="menu-container">
      <app-menu></app-menu></mat-sidenav>
    <mat-sidenav-content class="content-container">
      <div class="main-banner">
        <h1 class='banner-manners'>THIS IS IMPORTANT MESSAGE AREA</h1>
        <button (click)='menuBar.toggle()'>XYZ</button>
      </div>
      <app-kushman></app-kushman></mat-sidenav-content>  
  </mat-sidenav-container>
</div>