强制 angular mat-toolbar 和 mat-sidenav 占用 100% 的可用垂直空间答案

【问题标题】：Force angular mat-toolbar and mat-sidenav to take up exactly 100% of the available vertical space强制 angular mat-toolbar 和 mat-sidenav 占用 100% 的可用垂直空间
【发布时间】：2020-07-05 18:03:29
【问题描述】：

我正在尝试创建一个既有工具栏又有 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;
}

【问题讨论】：

标签： angular angular-material

【解决方案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>

【讨论】：