如果页面出现滚动,页面向下滚动,那么当你调用显示加载器的函数时,它只会覆盖页面的顶部。即使页面滚动到站点页脚,如何使加载器覆盖整个页面?
任何页面:
<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;
}
最佳答案
另一种方法是使用:
container {
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
}
关于css - Loader 没有覆盖整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56767810/