强制 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>