Listenposition nehmen die ganze Höhe

Question

Ich habe eine Seite, die einfach wie folgt aussieht:

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

Let sagt, es gibt 100 Produkte. Ich möchte, dass jeder Gegenstand die volle Höhe hat. Daher sollten Sie das nächste oder vorherige Element erst sehen können, wenn Sie scrollen. Ich möchte, dass die Höhe jedes Gegenstands gleich ist, was die Größe des Ionengehalts sein würde, denke ich. Wie kann ich das machen? Ich habe versucht, mit Höhe, Min-Höhe, Positionierung, Flex herumzuspielen, aber konnte es nicht funktionieren lassen?

Answer 1

Sie können vh Einheiten in modernen Browsern verwenden. Unterstützung ist 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>