无法将工具栏与 sidenav 正确组合答案

【问题标题】：Cannot combine a toolbar with sidenav properly无法将工具栏与 sidenav 正确组合
【发布时间】：2017-08-10 02:28:45
【问题描述】：

我的 CSS 出现了奇怪的行为。我正在使用材料设计，我只想要一个工具栏穿过顶部，左侧有一个侧边导航在工具栏下方到屏幕底部。到目前为止，即使没有内容，我也会在右侧看到一个滚动条。或者我的工具栏没有延伸到屏幕底部。最近，使用此代码：

<md-toolbar style="padding: 8px" color="primary">
    Inside the toolbar
</md-toolbar>

<md-sidenav-container style="
    position: fixed;
    height: 100%;
    min-height: 100%;
    width: 100%;
    min-width: 100%;">
  <md-sidenav>
    Inside the Sidebar
  </md-sidenav>

  <div>
    <router-outlet ></router-outlet>
  </div>
</md-sidenav-container>

我看起来一切正常，除了它切断了我的页面底部（与工具栏占用的数量相同）。所以这就像 sidenav 首先在屏幕的全高处渲染，然后工具栏弹出并将所有内容向下推。有谁知道解决这个问题的方法吗？

【问题讨论】：

标签： angular material-design

【解决方案1】：

在 github 上有一些关于此的问题，我还没有看到任何合适的解决方案。我做了一个快速的 CSS hack，可能对你也有帮助：

  .mat-sidenav-content
    height calc(100% - 64px)
    @media (max-width:600px) and (orientation:portrait)
      height calc(100% - 56px)

    @media (max-width:960px) and (orientation:landscape)
      height calc(100% - 48px)

这是一个手写笔代码，你可以在 sass/css 中重新创建它，无论你使用什么。

编辑：

忘了提，我也在父组件上使用了这个，我的sidenav 是：

parent-to-sidenav
  padding-top 64px
  @media (max-width:600px) and (orientation:portrait)
    padding-top 56px

  @media (max-width:960px) and (orientation:landscape)
    padding-top 48px

【讨论】：