如何在angular4 app中制作md-sidenav-container div的全高？

Question

我有一个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: 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;
  }
}

top必须与工具栏的高度相同。请记住，当宽度小于600px时，标准角度材质工具栏高度会变小。

Answer 2

我在同样的问题上挣扎。将top设置为64px的解决方案对我来说不起作用。

我找到了两种不同的解决方案。

1. 第一个解决方案使用flexbox。将md-toolbar和md-sidenav-container放在包含height: 100%的div中，并将display: flex与flex-direction: column一起使用。

2. 或者，此解决方案可能实际上做同样的事情，您可以将md-toolbar和md-sidenav-container项保留在根级别，然后让md-sidenav-container拥有height: calc(100% - 64px)其中工具栏的高度为64px。

Answer 3

html, body, material-app, mat-sidenav-container {
  height: 100%;
  width: 100%;
  margin: 0;
}