How to have footer fixed at bottom in Material Angular's mat-sidenav-container with router-outlet?

Issue

I want to fix ngx-audio-player at bottom of the screen like most music streaming websites. I'm using inside which I've and . Inside , I've for dynamic content and my for playing music.

The problem is has different heights based on the content of the link visited and moves up-down because of that. takes height equal to the content of the visited page.

How to fix position of at bottom of screen (also leaving space for sidenav on left side) no matter height of

If has more content, then only it will scroll not the

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

.router-link-active{
  background-color: #aaa7b4;
}

.example-spacer {
  flex: 1 1 auto;
  text-align: center;
}

<mat-sidenav-container class="sidenav-container" >
  
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list *ngIf="!anyrole">
      <a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/'+item" routerLinkActive="router-link-active"> {{item | titlecase}} </a>
    </mat-nav-list>
    <mat-nav-list *ngIf="anyrole">
      <a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/admin/'+item" routerLinkActive="router-link-active"> {{item | titlecase}} </a>
      <amplify-sign-out></amplify-sign-out>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <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  >Organization Name</span>
      <mat-form-field *ngIf="!orgName" class="example-spacer" appearance="fill">
        <mat-label >Select School</mat-label>
        <mat-select name="schoolId" [(ngModel)]="selectedSchool" (selectionChange)="refreshId($event.value)">
          <mat-option *ngFor="let school of facilitatorSchool" [value]="school.id">
            {{school.name}} 
          </mat-option>
        </mat-select>
      </mat-form-field>   

      <span *ngIf="orgName" class="example-spacer">{{orgName}}</span>
      <span >Hi {{currentUserName}}</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
    
      <app-player fixedInViewport></app-player>
   
  </mat-sidenav-content>
 
</mat-sidenav-container>

Solution

Try by encapsulating the router-outlet inside a as:

<div class="my-div">
  <router-outlet></router-outlet>
</div>

Where my-div should set the router space. For example:

my-div{
  top: 0;
  left: 0;
  position: absolute;
  width: 100vw;
  height: calc(100vh - $navbar - $controls);
  max-height: calc(100vh - $navbar - $controls);
  scroll-y: auto;
}

Where navbar and controlls are the heights of navbar and audio player.

The important part is to set max height and scroll. So now, the whole app wont scroll, but only the content of my-div.

Then the router should work only inside that div. And you can properly manipulate audio-player position.

Also, if that doesn't work, try by encapsulating audio-player and my-div inside another div, which should have full size and work as a whole screen div and contain all other divs. Make sure to style correctly.

You can also, try setting the body's css to scroll: none, and then style divs inside to properly scroll when it's needed.

Answered By - Agustin L. Lacuara