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

Question

我想像大多数音乐流媒体网站一样在屏幕底部修复 ngx-audio-player。 我正在使用里面我已经和。 在里面，我有动态内容和我的音乐播放。

问题是根据访问的链接的内容具有不同的高度并因此而上下移动。 高度等于访问页面的内容。

无论高度如何

如果有更多内容，那么只有它会滚动而不是

 .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

尝试将路由器插座封装在一个作为：

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

my-div应该在哪里设置路由器空间。 例如：

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

其中navbar和controlls是导航栏和音频播放器的高度。

重要的部分是设置最大高度和滚动。 所以现在，整个应用程序不会滚动，而只会滚动my-div的内容。

那么路由器应该只在那个div内工作。 您可以正确操作音频播放器 position。

此外，如果这不起作用，请尝试将audio-player和my-div封装在另一个 div 中，该 div 应该具有完整大小并作为整个屏幕 div 工作并包含所有其他 div。 确保样式正确。

您也可以尝试将主体的 css 设置为scroll: none ，然后在需要时设置内部的样式以正确滚动。