加载器微调器不使用全视口高度 html css

Question

 .sub-container { width: 100%; padding: 45px; height: 100vh; overflow: auto; position: relative; } .spinner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #d9d9d9; width: 100%; height: 100%; display: grid; place-items: center; opacity: 0.4; z-index: 1; }

 <div class="sub-container"> <div class="spinner"> <mat-progress-spinner mode="indeterminate" diameter="75" strokeWidth="5"> </mat-progress-spinner> </div> </div>

This is my source code for representing the material spinner in the background of my right container's div how can I achieve full viewport height for this.

Answer 1

Have you tried changing the .sub-container 's width (like so)?

 .sub-container { width: auto; padding: 45px; height: 100vh; overflow: auto; position: relative; } .spinner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #d9d9d9; width: 100%; height: 100%; display: grid; place-items: center; opacity: 0.4; z-index: 1; }

 <div class="sub-container"> <div class="spinner"> <mat-progress-spinner mode="indeterminate" diameter="75" strokeWidth="5"> </mat-progress-spinner> </div> </div>