无法获得 angular-material md-sidenav 的 100% 高度

Posted 2023-03-06

【中文标题】无法获得 angular-material md-sidenav 的 100% 高度

【英文标题】：Can't get angular-material md-sidenav to be 100% height

【发布时间】：2016-09-17 00:29:18

【问题描述】：

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

【参考方案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>

【讨论】：

使用全屏不会让移动浏览器中的地址栏在滚动时折叠

md-sidenav-layout 已弃用。这不再有效

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

md-sidenav-container 是新名称，全屏仍在使用新名称。

这个答案已经过时了。正如 Kumars 的回答所示，fixedInViewport="true" 是现在要走的路（使用 Angular Material 6 检查）

【参考方案2】：

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

试试这个：

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

【讨论】：

在最新版本中应该是 .mat-sidenav-container

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

我已经阅读了一些关于 fullscreen 被删除的声明，但它在 beta.7 上对我有用，并且似乎在 beta.12 中存在。有人确认弃用了吗？

现在是 mat-sidenav-container。如果您在容器之外有组件，这会很好，因为全屏覆盖了其他组件。

这会破坏导航时滚动到顶部的功能。

【参考方案3】：

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

见下文。

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

【讨论】：

我刚试过这个，它把左边的导航按钮移到了顶部，宽到了 100%

【参考方案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%;

【参考方案5】：

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

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

地点：

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

【讨论】：

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

【参考方案6】：

我最终在 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;