无法使 angular-material 的 md-sidenav 达到 100% 的高度

Question

我正在使用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%

- Alex Kibler

Answer 1

使用全屏模式

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

- user6508767

---

使用全屏模式时，在移动浏览器中滚动页面时无法折叠地址栏。 - basedgod

md-sidenav-layout 已被弃用，不能再使用。 - dinigo

显然，md-sidenav-container是新名称。来源：https://github.com/angular/material2/pull/2183 - Ruslan

md-sidenav-container是同样的东西的新名称，全屏功能仍然可以使用新名称。 - Rohit Luthra

这个答案已经过时了。正如Kumar的回答所显示的那样，现在使用fixedInViewport="true"（在Angular Material 6中已验证）是正确的方式。 - jowey

Answer 2

根据问题：Angular Material 2-在全屏模式下无法呈现上的评论，fullscreen属性将被移除...

请尝试以下方式替换：

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

- Ricardo Yanez

---

在最新版本中，这应该是 .mat-sidenav-container。 - Roger Far

正如@YesMan85所说，新版本是md-sidenav-container或.mat-sidenav-container。无论哪种方式，请记住使用position: fixed !important; 如果您不喜欢在css中使用!important，则可以使用“md-sidenav-container.mat-sidenav-container”来避免它。 - Dazag

我已经阅读了关于 fullscreen 被移除的几个声明，但在 beta.7 上它仍然有效，并且在 beta.12 中似乎也存在。有人能够确认是否已被弃用吗？ - isherwood

当导航时，这会破坏回到顶部的滚动功能。 - Tom Bevelander

非常感谢，我在样式上卡住了。.container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }，而头部和页脚被吞噬了。 - Aditya Yada

Answer 3

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

请参见以下内容。

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

- Kumar

---

我刚刚尝试了一下，它将左侧导航按钮移动到顶部并扩展到100%的宽度。 - Mauricio Gracia Gutierrez

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

- Sithija Piyuman Thewa Hettige

Answer 5

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

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

其中：

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

- taylorswiftfan

---

如果你的侧边栏上方有一个“topbar”，请将其更改为min-height: calc(100vh - 60px);，假设你的“topbar”高度为60像素。 - Elias Strehle

Answer 6

最终我在侧边栏上设置了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;
  }

}

- Alex Kibler