相关疑难解决方法(0)

我有一个angular4应用程序,现在用的角料框架https://material.angular.io/components/sidenav/examples.我想让md-sidenav-container拉伸整个div的高度,而不会遮住标题.我附上了全屏指令,这导致sidenav填满屏幕的整个高度,从而掩盖了标题组件.这不是我想要的.这些图像示出了sidenav拉伸头的上方,以及其中它停止在头,但不延伸到所述底部的另一尝试.我希望它一直延伸到标题,一直到屏幕的底部.我该如何做到这一点？谢谢!

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: …