Can't Get Angular-Material Md-Sidenav to Be 100% Height

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

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>

unable to set the height of a angular/material sidenav to 100%

Just wanted to post for anyone new travelling here like me....

Not sure if this is a new option or which version of material it was added in, but currently you can simple add [fixedInViewport]="true" to the mat-sidenav component as well as using [fixedTopGap] and [fixedBottomGap] to optionally allow for any gaps for menu/tool bars.

Documentation here: Angular Material Sidenav API

Also, note that on the mat-sidenav-container component you can add the directive "fullscreen" to expand your content to fit the viewport if you so wish. The overlay for push and over modes only shows over the content, so if it doesn't fit the whole viewport then neither will your overlay.

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav 
                 [fixedInViewport]="true" 
                 mode="push">
        This is the sidenav, yay
    </mat-sidenav>
    <mat-sidenav-content>
        This is the content section
        <button mat-button
                (click)="sidenav.toggle()">Toggle sidenav</button>
    </mat-sidenav-content>
</mat-sidenav-container>

How to set fixed height for mat-sidenav-content?

Set the height to 100vh

Which stands for viewport height.

How can I make mat-sidenav take up entire vertical space underneath mat-toolbar?

Try adding this

.main-div {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
   height: 100vh;
}
.mat-sidenav-container {
   height: 100%;
}
    

---

Related Topics