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

Question

I\'m making a new angular2 application using angular2-material with a sidenav. And I can\'t for the life of me get that sidenav to have a height of 100%. I\'m trying to ge

Answer 1

Use fullscreen

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

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

make height 100vh instead of 100%....eventhough you can make width = 100% you cannot simply make height 100% at once ,because usually you can scroll down to infinity. use

position:absolute;

and then use

height : 100%;

Answer 3

You can also set mad-sidenav-content's min-height to be 100vh like so:

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

Where:

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

Answer 4

I ended up setting position:fixed on the sidenav itself, which gave me exactly what I wanted.

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

In the latest version of material.angular you can use the property fixedInViewport on mat-sidenav.

See below.

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

Answer 6

Acording to a comment on Issue : Angular Material 2 - not rendering in full screen the fullscreen attribute will be removed...

Try this instead:

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