Alex Kibler Alex Kibler - 4 months ago 564
CSS Question

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

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 get a menu to slide out that takes up the whole height of the screen. And I want it to open the same way no matter where the user has scrolled.

Here is my template:

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


And here is my 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;
}

}


I also have
html
set to
height:100%
and
body
set to
min-height:100%

Answer

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