Ionic content pushed to the bottom with a header present

So I have an app I am working on and I added an Ion header that contains a burger icon for the menu . But with this, any content below it is pushed to the bottom of the screen.

Code:

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

What I get:

Solution

You should try wrapping the body in <ion-content> instead of 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>