angular - 如何在 angular4 应用程序中制作 md-sidenav-container 全高 div？

Question

我有一个 angular4 应用程序并且正在使用 Angular Material 框架 https://material.angular.io/components/sidenav/examples .我想让 md-sidenav-container 拉伸(stretch)整个 div 的高度而不覆盖标题。我附上了 fullscreen 指令，它会导致 sidenav 填满屏幕的整个高度，从而覆盖标题组件。这不是我想要的。图像显示了标题上方的 sidenav 拉伸(stretch)，以及它在标题处停止但没有拉伸(stretch)到底部的另一种尝试。我希望它一直延伸到标题，一直延伸到屏幕底部。我该如何做到这一点？ 谢谢!

HTML

<div class="bar">
  <md-sidenav-container class="example-sidenav-fab-container">
  <md-sidenav #sidenav mode="side" opened="true" align="end">
    <!--<button md-mini-fab class="example-fab" (click)="sidenav.toggle()">-->
      <!--<md-icon>add</md-icon>-->
    <!--</button>-->
    <div class="example-scrolling-content">
      <ul>
        <li>Recommendations</li>
        <li>Events</li>
        <li>Settings</li>
      </ul>
    </div>
  </md-sidenav>
  <button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
    <md-icon>add</md-icon>
  </button>
</md-sidenav-container>
</div>

CSS

md-sidenav-container
  :background-color white
  :float right
  :width 300px
  :height 400px

md-sidenav
  :background-color $light-blue


//.example-sidenav-fab-container
//  width: 300px
//  height: 400px
  //border: 1px solid rgba(0, 0, 0, 0.5)


.example-sidenav-fab-container md-sidenav
  max-width: 300px

.example-sidenav-fab-container md-sidenav
  display: flex
  overflow: visible

.example-scrolling-content
  overflow: auto


.example-fab
  position: absolute
  right: 20px
  bottom: 10px

.bar
  :height 100%

Answer 1

我发现这个变通方法工作正常

HTML

<md-sidenav-container id="container" fullscreen >

CSS

#container {
 top: 64px !important;
}

@media(max-width: 599px) {
  #container {
    top: 56px !important;
  }
}

顶部必须与工具栏具有相同的高度。请记住，当宽度小于 600px 时，标准的 Angular Material 工具栏高度会变小。