強制 angular mat-toolbar 和 mat-sidenav 准確占用 100% 的可用垂直空間

Question

我正在嘗試創建一個同時具有工具欄和 sidenav 的 Angular 應用程序。 我想讓它使工具欄和側邊導航的垂直高度加起來是瀏覽器 window 可用垂直空間的 100%。 但是我無法弄清楚如何做到這一點。 目前我有一個工具欄和一個 sidenav，里面除了height: 100%之外什么都沒有。 然而，這會迫使 sidenav 大於可用空間，因此它變得可滾動。

我想強制這兩個都具有 100% 的高度，僅此而已，以確保頁面不會變得可滾動。 我計划有一個組件來填充剩余空間，它將容納頁面內容並滾動。 我不希望頁面的正文滾動。

這肯定很難做到吧？ 我已經嘗試了幾個小時了。

HTML

<mat-toolbar>
    <span>Text</span>
</mat-toolbar>

<mat-sidenav-container>
    <mat-sidenav opened mode="side">
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

mat-sidenav-container{
  height: 100%;
}

mat-sidenav{
  background-color: #e7e9f2;
  width: 200px;
  border: 0;
}

mat-sidenav-content{
  background-color: white;
  overflow-y: scroll;
}

Answer 1

找到了一個解決方案，希望它可以幫助任何在同一問題上苦苦掙扎的人。

我不確定這是否是正確的方法，但它仍然有效。

創建一個包含mat-toolbar和mat-sidenav-container元素的 div，並為其提供以下屬性。

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
}

最終 HTML

<div class="body-container">
    <mat-toolbar>
        <span>Text</span>
    </mat-toolbar>
    <mat-sidenav-container>
        <mat-sidenav opened mode="side">
            <app-left-sidebar></app-left-sidebar>
        </mat-sidenav>
        <mat-sidenav-content>
            <router-outlet></router-outlet>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>