工具栏下的全高侧导航（跨设备）答案

【问题标题】：Full-height sidenav under a toolbar (cross-device)工具栏下的全高侧导航（跨设备）
【发布时间】：2017-07-30 12:26:41
【问题描述】：

我通过这种方式将 sidenav 设置为适合 100% 的屏幕高度：

我的 app.component.html：

<md-toolbar>etc</md-tooblar>

<router-outlet></router-outlet>

我的一条路线以这种方式引用sidenav：

admin.component.ts

<md-sidenav-container>
  <md-sidenav #sidenav mode="side" opened="true" class="sidenav">
        My Sidenav
  </md-sidenav>

  <div class="sidenav-content mat-typography">
      <router-outlet></router-outlet>
  </div>
</md-sidenav-container>

admin.component.css：

md-sidenav-container {
   height: 100vh;
}

问题是高度是 100%，不包括我的主应用程序组件中的工具栏，并且我的任何页面中都有一个滚动条。

我尝试将我的 md-sidenav-container 高度设置为 93%（这完全适合我的屏幕），但在其他屏幕中，容器距离屏幕底部大约 30-50 像素（容器无法到达屏幕底部）。

有什么解决办法吗？

【问题讨论】：

height: 100% 是相对于父 div 的高度。 height: 100vh 在这里不是更合适吗？
100vh 而不是 100% 怎么样。另一方面，为什么你有两次？
我试过height: 100vh，结果是一样的：滚动条出现在每一页（工具栏高度没有计算）。我有 2 个<router-outlest> 因为它们是 2 个不同的模块。
然后把 calc(100vh) - heightOfToolbar
@Vega 不错！ height: calc(100vh - 50px); 成功了，现在高度适用于任何屏幕

标签： css angular angular-material2

【解决方案1】：

放置

md-sidenav-container {
   height: calc(100vh - hightOfToolbar);
}

应该适用于任何地方，因为您会将容器高度调整为屏幕最大高度 - 工具栏的高度。

【讨论】：