如何在angular4应用程序中使md-sidenav-container达到div的高度? [英] How to make md-sidenav-container full height of div in an angular4 app?

问题描述

我有一个angular4应用，正在使用角度材料框架 https://material.angular .io/components/sidenav/examples .我想使md-sidenav-container拉伸div的整个高度，而又不遮盖标题.我附加了全屏指令，该指令使sidenav填充屏幕的整个高度，从而掩盖了标题组件.这不是我想要的.图像显示了sidenav在页眉上方伸展，以及另一种尝试，即它在页眉处停止但没有伸展到底部.我希望它一直延伸到标题，然后一直延伸到屏幕底部.我该如何完成? 谢谢！

I have an angular4 app and am using the angular materials framework https://material.angular.io/components/sidenav/examples. I want to make the md-sidenav-container stretch the whole height of the div without covering up the header. I have attached the fullscreen directive, which causes the sidenav to fill the whole height of the screen thus covering up the header component. This is not what I want. The images show the sidenav stretch above the header, as well as another attempt where it stops at the header but does not stretch to the bottom. I want it to stretch all the way up to the header and all the way down to the bottom of the screen. How do I accomplish this? Thanks!

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%

推荐答案

我发现此可行的解决方法

HTML

I have found this workaround that works ok

HTML

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

CSS

#container {
 top: 64px !important;
}

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

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

top has to have the same height of your toolbar. Remember that the standard Angular Material toolbar height becomes smaller when the width is less than 600px .

这篇关于如何在angular4应用程序中使md-sidenav-container达到div的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！