无法将 angular-material md-sidenav 设置为 100% 高度

Question

我正在使用带有 sidenav 的 angular2-material 制作一个新的 angular2 应用程序。而且我这辈子都无法让 sidenav 的高度达到 100%。我正在尝试让一个菜单滑出，占据整个屏幕的高度。我希望无论用户滚动到哪里，它都以相同的方式打开。

这是我的模板：

<md-sidenav-layout class="demo-sidenav-layout">
  <md-sidenav #start mode="over">

    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
    <br>
  </md-sidenav>
    <md-toolbar color="primary">

      <button md-button (click)="start.toggle()">Open Side Drawer</button>
      <span>Spellbook</span>

      <span class="demo-fill-remaining">

      </span>

    </md-toolbar>
  <div class="demo-sidenav-content">

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

这是我的 CSS：

.demo-sidenav-layout {
  //border: 3px solid black;
  min-height:100%;
  md-sidenav {
    padding: 10px;
    background: gainsboro;
    min-height: 100%;
  }
}

.demo-sidenav-content {
  padding: 15px;
  min-height:100%;
}

.demo-toolbar {
  padding: 6px;

  .demo-toolbar-icon {
    padding: 0 14px 0 14px;
  }

  .demo-fill-remaining {
    flex: 1 1 auto;
  }

}

我也将 html 设置为 height:100% 并将 body 设置为 min-height:100%

Answer 1

我最终在 sidenav 本身上设置了 position:fixed，这正是我想要的。

.demo-sidenav-layout {
  position:fixed;
  //border: 3px solid black;
  min-height:100%;
  md-sidenav {
    padding: 10px;
    background: gainsboro;
    min-height: 100%;
  }
}

.demo-sidenav-content {
  padding: 15px;
  min-height:100%;
}

.demo-toolbar {
  padding: 6px;

  .demo-toolbar-icon {
    padding: 0 14px 0 14px;
  }

  .demo-fill-remaining {
    flex: 1 1 auto;
  }

}

Answer 2

使用全屏

<md-sidenav-layout fullscreen>

  <md-sidenav #start mode="over">
    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
    <br>
  </md-sidenav>

  <md-toolbar color="primary">
    <button md-button (click)="start.toggle()">Open Side Drawer</button>
    <span>Spellbook</span>
    <span class="demo-fill-remaining"></span>
  </md-toolbar>

  <div class="demo-sidenav-content">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-layout>

Answer 3

根据对 Issue : Angular Material 2 - not rendering in full screen 的评论，全屏属性将被删除...

试试这个：

mat-sidenav-container {
   position: fixed;
   height: 100%;
   min-height: 100%;
   width: 100%;
   min-width: 100%;
}

Answer 4

  .demo-sidenav-layout {
      position:fixed;
      //border: 3px solid black;
      min-height:100vh;
      md-sidenav {
        padding: 10px;
        background: gainsboro;
        min-height: 100%;
      }
    }

将高度设置为 100vh 而不是 100%...尽管您可以将宽度设置为 100%，但您不能简单地立即将高度设置为 100%，因为通常您可以向下滚动到无穷大。使用

position:absolute;

然后使用

height : 100%;

Answer 5

在 material.angular 的最新版本中，您可以在 mat-sidenav 上使用属性 fixedInViewport。

见下文。

<mat-sidenav #start mode="over" fixedInViewport="true"> ... </mat-sidenav>

Answer 6

您还可以将 mad-sidenav-content 的 min-height 设置为 100vh，如下所示：

<mat-sidenav-content class="sidenav__content--height"> .... </mat-sidenav-content>

其中：

.sidenav__content--height{
  min-height: 100vh;
}

无法将 angular-material md-sidenav 设置为 100% 高度

Can't get angular-material md-sidenav to be 100% height

css

angular-material

angular