angular - 离子内容被推到底部并带有标题

Question

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

代码：

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

我得到什么：

标签： angularionic-frameworkionic3ionic4

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>