css - 试图让我的幻灯片框覆盖整个页面，但不覆盖底部的标签

Question

codepen

  <ion-content>
    <ion-slide-box class="my-slide-box">
      <ion-slide>cat</ion-slide>
      <ion-slide>dog</ion-slide>
      <ion-slide>rat</ion-slide>
    </ion-slide-box>
    <div class="tabs" style="height:auto;">
      <div class="row"><div class="col" style="padding: 0">
          <button class="button button-block button-positive">
          </button>
        </div>
      </div>
    </div>
  </ion-content>

如何让 my-slide-box 只延伸到 tabs？

Answer 1

您可以使用 css calc 来计算 .my-slide-box 的高度。

codepen

.my-slide-box {
  height: calc(100% - 77px); // 77px is the height of tabs
  background: green; 
}