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

【问题标题】：How to have footer fixed at bottom in Material Angular's mat-sidenav-container with router-outlet?如何在带有路由器插座的 Material Angular mat-sidenav-container 中将页脚固定在底部？
【发布时间】：2021-12-28 10:36:13
【问题描述】：

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

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

无论高度如何，如何固定屏幕底部的位置（同时在左侧为sidenav留出空间）

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

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

【问题讨论】：

请添加 stackbilitz 以获得更多帮助

标签： html css angular angular-material

【解决方案1】：

尝试将 router-outlet 封装在中：

<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 内工作。并且您可以正确操纵音频播放器的位置。

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

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

【讨论】：