离子内容被推到底部 header present

Question

所以我有一个正在开发的应用程序，我添加了一个 Ion header，其中包含菜单的汉堡图标。但是有了这个，它下面的任何内容都会被推到屏幕底部。

代码：

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>
<div >

<ion-card >
<ion-card-content *ngIf="currentLevel == 1">
    Level 1
</ion-card-content>


  <ion-card-content *ngIf="currentLevel == 2">
    Level 2
</ion-card-content>


  <ion-card-content *ngIf="currentLevel == 3">
    Level 3
</ion-card-content>


  <ion-card-content *ngIf="currentLevel == 4">
    Level 4
</ion-card-content>


<ion-card-content *ngIf="currentLevel == 5">
  Level 5
</ion-card-content>
</ion-card>
</div>

我得到的：

Answer 1

您应该尝试将 body 换成 <ion-content> 而不是 div

<ion-header [translucent]="true">
 <ion-toolbar>
    <ion-buttons slot="start">
     <ion-menu-button></ion-menu-button>
    </ion-buttons>
 </ion-toolbar>
</ion-header>

<ion-content>
 <ion-card>
  <ion-card-content *ngIf="currentLevel == 1">
   Level 1
  </ion-card-content>

  <ion-card-content *ngIf="currentLevel == 2">
  Level 2
  </ion-card-content>

  <ion-card-content *ngIf="currentLevel == 3">
   Level 3
  </ion-card-content>

  <ion-card-content *ngIf="currentLevel == 4">
     Level 4
  </ion-card-content>

  <ion-card-content *ngIf="currentLevel == 5">
   Level 5 
  </ion-card-content> 
   </ion-card>
</ion-content>

离子内容被推到底部 header present

Ionic content pushed to the bottom with a header present

ionic-framework

ionic3

angular

ionic4