如何固定 mat-toolbar 和 mat-sidenav 並且在 mat-sidenav-content 內只有一個滾動條？

Question

有關有問題的應用程序，請參閱以下 StackBlitz： https://stackblitz.com/edit/angular-7cazwh?file=src%2Fapp%2Fapp.component.html

<div class="main-div">
  
  <mat-toolbar color="primary" class="app-header">
    <button mat-icon-button (click)="toggleSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
    <span>Config</span>
    <span class="spacer"></span>
    <button mat-icon-button>
      <mat-icon>account_circle</mat-icon>
    </button>
    <span>Admin</span>
  </mat-toolbar>

  <mat-drawer-container class="app-sidenav">
    <mat-drawer #sidenav mode="side" opened="true" class="sidenav" fixedInViewport="false">
      <mat-list>
        <mat-list-item>
          <mat-icon matListIcon>people</mat-icon>Users
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>devices_other</mat-icon>Devices
        </mat-list-item>
      </mat-list>
    </mat-drawer>
    <mat-drawer-content>
      <p style="margin:20px">TODO: mat-sidenav-content</p>
    </mat-drawer-content>
  </mat-drawer-container>

</div>

.spacer {
  flex: 1 1 auto;
}

.main-div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

.app-header {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.app-sidenav {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

目前，當頁面溢出時，我最終會看到右側的滾動條，它跨越 header 區域（放置mat-toolbar的位置）和內容區域（放置mat-sidenav-content的位置）。 如下所示：

相反，我想要的是滾動條僅顯示在內容區域中，如下所示。 我希望 header 和左側菜單保持固定（當用戶在溢出的內容中上下滾動時不要移動）：

Answer 1

此滾動正在應用於您的body元素。 您可能想簡單地重置html和body元素的margin和padding ：

body, html {
  padding: 0;
  margin: 0;
}

https://stackblitz.com/edit/angular-eddznu?file=src%2Fstyles.css