强制angular mat-工具栏和mat-sidenav恰好占据100%的可用垂直空间

Question

我正在尝试创建一个同时具有工具栏和sidenav的Angular应用程序。我想让工具栏和sidenav的垂直高度加起来达到浏览器窗口可用垂直空间的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>