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

score 66 · Accepted Answer · edited Jul 09 '16 at 05:28

66

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>

edited Jul 09 '16 at 05:28

RFVoltolini

390
1
7

answered Jun 24 '16 at 11:36

user6508767

708
5
3

1

using fullscreen doesn't let the address bar in mobile browsers collapse while scrolling – basedgod Sep 05 '16 at 14:37
5

`md-sidenav-layout` is deprectad. This is not valid anymore – dinigo Feb 20 '17 at 16:36
2

Apparently `md-sidenav-container` is the new name. Source: https://github.com/angular/material2/pull/2183 – Ruslan Feb 24 '17 at 08:27
4

md-sidenav-container is the new name for the same and fullscreen is still working with new name. – Rohit Luthra Apr 01 '17 at 11:54
If anyone needs a demo of using a fullscreen sidenav I have a plunk [here](http://embed.plnkr.co/AYLl9W/) – JayChase Jul 19 '17 at 14:03
This resolved my Safari height collapse issue using beta.7. – isherwood Oct 17 '17 at 14:18
What is the best way to verify that this attribute (**fullscreen**) is presented in Unit Testing (Jasmine)? – Pavel Sapehin Jan 08 '18 at 07:23
3

this answer is outdated. As Kumars answer shows, `fixedInViewport="true"` is the way to go now (checked with Angular Material 6) – jowey May 10 '18 at 22:40

Ricardo Yanez · Answer 2 · 2018-04-24T23:31:16.580

61

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

edited Apr 24 '18 at 23:31

answered Jan 29 '17 at 00:28

Ricardo Yanez

906
13
14

3

In the latest version this should be .mat-sidenav-container – Roger Far Feb 26 '17 at 18:44
2

As @YesMan85 said, the new version is md-sidenav-container or .mat-sidenav-container. Either way remember to use position: fixed !important; If you don't like using !important in your css you can make use "md-sidenav-container.mat-sidenav-container" to avoid it. – Dazag Mar 23 '17 at 10:41
1

I've read several statements about `fullscreen` being removed, but it's working for me on beta.7 and seems to be present in beta.12. Does anyone have confirmation of deprecation? – isherwood Oct 17 '17 at 14:20
It's mat-sidenav-container now. This works good if you have components outside of the container as fullscreen covers the other components. – rtaft Apr 24 '18 at 17:27
This breaks the scroll-to-top functionality when navigating. – Tom Bevelander Oct 06 '19 at 18:10
thanks a lot I was stuck with styling .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } and header , footer got swallowed – Aditya Yada Feb 19 '21 at 00:56
just add min-height: 100% and no more css – Mohammad Reza Mrg Sep 12 '22 at 15:45

Kumar · Answer 3 · 2018-03-19T17:55:12.167

17

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>

edited Mar 19 '18 at 17:55

answered Mar 19 '18 at 17:48

Kumar

528
5
9

I just tried this and it moved the left navigations buttons to the top and wide to the 100% – Mauricio Gracia Gutierrez Jun 11 '19 at 14:25

score 4 · Answer 4 · answered Aug 15 '17 at 10:11

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

score 2 · Answer 5 · answered May 14 '19 at 08:36

2

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

answered May 14 '19 at 08:36

taylorswiftfan

1,371
21
35

If you have a `topbar` above your sidebar, change this to `min-height: calc(100vh - 60px);` assuming your topbar is 60px high. – Elias Strehle Jun 04 '21 at 14:20

score 1 · Answer 6 · answered May 20 '16 at 15:02

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

}

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

6 Answers6

Linked