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个项目。我希望每个项目都能达到最高水平。因此，除非您滚动，否则您根本无法看到下一个或上一个项目。我想每个项目的高度都是相同的，我想是离子含量的大小。我怎样才能做到这一点？我试过玩高度，最小高度，定位，弯曲，但是还没能使它起作用？

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>

列表项占据所有高度

1 个答案: