如何使用 Angular Material 让 mat-sidenav-content 占据 100% 的高度

Posted 2023-02-22

【中文标题】如何使用 Angular Material 让 mat-sidenav-content 占据 100% 的高度

【英文标题】：How to get mat-sidenav-content to take 100% of height using Angular Material

【发布时间】：2019-11-08 19:06:20

【问题描述】：

所以我有一个侧导航，似乎无法让它占据 100% 的高度。 正如您在图像中看到的那样，它被切断了。 使用最新的 Angular 8 和最新的 Material。

您可以在此处查看主要组件 css： https://github.com/born2net/studiopro-web/blob/master/src/app/layouts/main/main.component.scss

如果我强迫它通过

<div fxLayout="row" class="container" style="background-color: darkslategray; min-height: 2000px">

它可以工作，但我当然不想将高度硬编码为 2000 像素 以及这里的样子：

肖恩

【参考方案1】：

这解决了问题：

.container 
  height: calc(100vh - 70px);

【讨论】：

它会引发一些其他的scolling问题