Css Can'；t将角度材料md sidenav设置为100%高度

我正在使用带有sidenav的angular2材质制作一个新的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>

---

我还将

html

设置为

height:100%

和

body

设置为

minheight:100%

我最后在侧导航上设置了

位置：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;
  }

}

---

全屏使用

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

登录


开口抽屉
魔法书

根据对全屏属性的注释，将删除该属性

请尝试以下方法：

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

将高度设为100vh而不是100%……即使可以将宽度设为100%，也不能一次将高度设为100%，因为通常可以向下滚动到无穷大。 使用

然后使用

height : 100%;

---

在material.angular的最新版本中，可以使用mat sidenav上的特性FixedViewport

见下文

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

。。。

您还可以将

mad sidenav内容

的

min height

设置为

100vh

，如下所示：

其中：

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

使用全屏不会让移动浏览器中的地址栏在滚动
md sidenav layout
时崩溃。这不再有效。
md sidenav container
是新名称。来源：md sidenav container是相同的新名称，fullscreen仍在使用新名称。此答案已过时。正如Kumars的回答所示，
fixedInViewport=“true”
是现在的发展方向（使用角度材质6进行检查），在最新版本中，这应该是.mat sidenav containerAs@YesMan85说，新版本是md sidenav container或.mat sidenav container。无论哪种方式，请记住使用位置：固定！重要的；如果你不喜欢使用！重要的是，在你的css中，你可以使用“md sidenav container.mat sidenav container”来避免它。我读过一些关于删除
fullscreen
的声明，但它在beta.7上对我有效，并且似乎在beta.12中出现。有人确认弃用吗？现在是mat sidenav容器。如果容器外有组件，则此功能非常有效，因为全屏覆盖了其他组件。这会在导航时中断滚动到顶部的功能。我刚刚尝试了此功能，它将左侧导航按钮移动到顶部，并将其移动到100%。如果侧边栏上方有
顶栏
，请将此更改为
最小高度：计算（100vh-60px）；
假设你的顶栏是60px高。
height : 100%;

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

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