Angular 离子含量被推到底部，并有一个标题

所以我有一个我正在开发的应用程序，我添加了一个包含汉堡图标的离子头。但这样一来，它下面的任何内容都会被推到屏幕底部

代码：

<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>

我得到的是：

---

你应该试着把身体包起来，而不是用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>