6

I can't get the Angular Material sidenav container to fill the height of the screen. The sidenav as well as the sidenav content is just as high as it needs to be to fit its content. I want to have it's height to fill the screen.

HTML of Nav Component:

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    *ngIf="isHandset$ | async">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
    <span>Title</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" 
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false"
      (click)="closeDrawerIfHandset(drawer)">
      <mat-nav-list>
        <a mat-list-item routerLink="/">Home</a>
        <a mat-list-item routerLink="/link1">Link1</a>
      </mat-nav-list>
  </mat-sidenav> 
  <mat-sidenav-content>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

HTML of parent (root) component:

<main-nav>
    <router-outlet></router-outlet>
</main-nav>

I don't really have CSS applied:

.sidenav {
  width: 200px;
}

This is what it looks like: sidenav does not fill height

I've already tried setting the mat-sidenav-container to fullscreen but that hides the mat-toolbar. When I set the container to have a 'top:' so that the toolbar is shown again, the scrolling is not enough to show the whole page content.

Stackblitz example: https://stackblitz.com/edit/angular-mcbhqt-r7kmlw

luhu
  • 361
  • 3
  • 12
  • Does this answer your question? [How to make md-sidenav-container full height of div in an angular4 app?](https://stackoverflow.com/questions/44911625/how-to-make-md-sidenav-container-full-height-of-div-in-an-angular4-app) – Mathias F Jan 12 '23 at 09:31

1 Answers1

-3

I had the exact same problem. This solution worked for me

html, body, .material-app, .mat-sidenav-container {
  height: 100%;
  width: 100%;
}

Credits to this answer https://stackoverflow.com/a/51497445/11350563

M4n1
  • 47
  • 1
  • 6