css - 工具栏下的全高 sidenav(跨设备)

Question

我通过这种方式将 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 像素(容器未达到屏幕底部)。

有什么解决办法吗？

Answer 1

放

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

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