html - 溢出时内部面板高度不是 100%

Question

我有一个面板，里面有组件，一旦按下提交按钮，就会出现一个叠加层，但当我一直滚动到底部时，它并没有覆盖整个父面板(​​见图)。此外，无论我是否滚动，微调器都需要始终位于中心。我使用了 position: fixed; 但我不知道这是否是最佳做法。

CSS

.pay-storage-container {
  $inner-padding: 16px;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  width: 325px;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  background-color: #fff;

     .loading-container {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;

        img {
          position: fixed;
          top: 50%;
          right: 18%;
          animation: spinner 1s linear infinite;
        }
      }
   }

HTML

<div class="pay-storage-container {{toggleSideBar ? 'showSideBar' : 'closeSideBar'}}">
  <div class="header-container">
    <div class="header">Pay Storage</div>
    <span class='close-icon csx-common_delete' (click)="onToggleSideBar(false)"></span>
  </div>
  <div class="pay-storage-inner">
    <app-equipment-summary [equipmentSummary]='equipmentSummary'></app-equipment-summary>
    <app-credit-card #creditCardForm></app-credit-card>
    <div class="loading-container" *ngIf="isLoading">
      <img src="assets/spinner.svg" alt="">
    </div>
  </div>
  <div class="footer-container">
    <!-- <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='!creditCardForm.creditCardForm.valid || isLoading'
      (click)="onSubmitPayment()"></button> -->
    <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='isLoading' (click)="onSubmitPayment()"></button>
  </div>

  <div *ngIf="paymentMessage$ | async as message" class="pay-storage-inner pay-storage-success">
    <app-payment-success [paymentSuccess]="paymentSuccess" (close)="onToggleSideBar($event)"></app-payment-success>
  </div>
</div>

Answer 1

我认为使用 position:fixed 将微调器保持在页面中央没有任何问题。

此外，如果您想完全覆盖您的内容，那么您的加载容器需要位于您想要覆盖的内容的最底部。下面的代码应该只是覆盖 pay-storage-container:

<div class="pay-storage-container {{toggleSideBar ? 'showSideBar' : 'closeSideBar'}}">
  <div class="header-container">
    <div class="header">Pay Storage</div>
    <span class='close-icon csx-common_delete' (click)="onToggleSideBar(false)"></span>
  </div>
  <div class="pay-storage-inner">
    <app-equipment-summary [equipmentSummary]='equipmentSummary'></app-equipment-summary>
    <app-credit-card #creditCardForm></app-credit-card>
  </div>
  <div class="footer-container">
    <!-- <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='!creditCardForm.creditCardForm.valid || isLoading'
      (click)="onSubmitPayment()"></button> -->
    <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='isLoading' (click)="onSubmitPayment()"></button>
  </div>

  <div *ngIf="paymentMessage$ | async as message" class="pay-storage-inner pay-storage-success">
    <app-payment-success [paymentSuccess]="paymentSuccess" (close)="onToggleSideBar($event)"></app-payment-success>
  </div>
    <div class="loading-container" *ngIf="isLoading">
      <img src="assets/spinner.svg" alt="">
    </div>

</div>