如何在 Material Angular 的 mat-sidenav-container 中将页脚固定在带有路由器插座的底部？

Question

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>

Answer 1

Try by encapsulating the router-outlet inside aas:

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