css - Loader 没有覆盖整个页面

Question

如果页面出现滚动，页面向下滚动，那么当你调用显示加载器的函数时，它只会覆盖页面的顶部。即使页面滚动到站点页脚，如何使加载器覆盖整个页面？

任何页面:

<app-loader [loader]="loading"></app-loader>
...

loader.component.html:

<div class="load-container" *ngIf="loader">
  <div class="load-speeding-wheel"></div>
</div>

loader.component.ts:

@Input() loader: boolean = false;

layout.component.html:

<div class="container">
  <app-toolbar (sideNavToggled)="snav.toggle()"></app-toolbar>
  <mat-sidenav-container class="sidenav-container" [style.marginTop.px]="toolBarHeight">
    <mat-sidenav #snav class="sidenav" [(mode)]="sideNavMode" [(opened)]="sideNavOpened">
      <app-sidenav></app-sidenav>
    </mat-sidenav>
    <mat-sidenav-content> 
      <main class="main-container">
        <router-outlet></router-outlet>
      </main>
      <app-footer></app-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

loader.css:

.load-container {
    width           : 100%;
    height          : 100%;
    text-align      : center;
    position        : absolute;
    left            : 0;
    top             : 0;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    background-color: rgba(0, 0, 0, 0.3);
    z-index         : 10;
}

Answer 1

另一种方法是使用:

container {
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
}