<ion-content> 在 Ionic 中落后于 <ion-header>答案

【问题标题】：<ion-content> goes behind <ion-header> in Ionic<ion-content> 在 Ionic 中落后于 <ion-header>
【发布时间】：2018-08-09 10:45:49
【问题描述】：

<ion-header> 
  <ion-navbar>
   <ion-title>Physics</ion-title> 
 </ion-navbar> 
</ion-header>

<ion-content padding has-header contentTop="200px"> 
  <ion-list class="chapter-list"> 
      <button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button> 
  </ion-list> 
</ion-content>

这是我的代码，其中<ion-content> 隐藏在<ion-header> 后面。我的离子版本是 3.19.1。

如何解决这个问题。我也尝试过 has-header。

【问题讨论】：

你的班级章节列表是什么？
.chapter-list{ img{ height: 30px; margin: 0 11px 0px 0px !important; } ion-label.label.label-md { white-space: unset; margin: 0; line-height: 25px; font-size: 1.5rem } button{ border-bottom: 1px solid #dedede; } .item-inner{ border: none !important; } } 这是我列出的样式。

标签： ionic-framework ionic2 ionic3

【解决方案1】：

尝试在 ion-content 标签中添加<ion-grid></ion-grid>

<ion-header> 
  <ion-navbar>
   <ion-title>Physics</ion-title> 
 </ion-navbar> 
</ion-header>

<ion-content padding has-header contentTop="200px">
  <ion-grid>
  <ion-list class="chapter-list"> 
      <button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button> 
  </ion-list> 
  </ion-grid>
</ion-content>

【讨论】：