しているリスト項目は、私は単純にこのようになりますページを持っているすべての高さ

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>