让列表项占据所有高度

Question

我有一个看起来像这样的页面：

<ion-navbar *navbar>
  <ion-title>My List</ion-title>
</ion-navbar>

<ion-content class="has-header">
  <ion-list>
    <ion-item *ngFor="#item of items">
      <ion-toolbar>
        <ion-buttons end>
          <button>Something</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.image" class="slide-image"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-item>
  </ion-list>
</ion-content>

假设有 100 个项目。我希望每个项目都占据整个高度。因此，除非滚动，否则您根本看不到下一个或上一个项目。我希望每个项目的高度都相同，这将是我猜想的离子含量的大小。我怎样才能做到这一点？我尝试过使用 height、min-height、positioning、flex 等，但没有成功？

Answer 1

您可以在现代浏览器中使用vh 单位。支持是pretty good。

ion-content {background: #f6f6b2;}
ion-content + ion-content {background: #b3f4b3;}
ion-content {display: block; height: 100vh;}

<ion-content class="has-header">
  <ion-list>
    <ion-item *ngFor="#item of items">
      <ion-toolbar>
        <ion-buttons end>
          <button>Something</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.image" class="slide-image"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-item>
  </ion-list>
</ion-content>

<ion-content class="has-header">
  <ion-list>
    <ion-item *ngFor="#item of items">
      <ion-toolbar>
        <ion-buttons end>
          <button>Something</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.image" class="slide-image"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-item>
  </ion-list>
</ion-content>