Have list item take all the height - css

Question

I have a page which simply looks like this:
<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 says there are 100 items. I would like each item to take the full height. So you should not be able to see the next or previous item at all unless you scroll. I would like the height of every item to be the same which would be the size of ion-content I guess. How can I do this? I have tried playing around with height, min-height, positioning, flex, but have not been able to make it work?

Answer 1

You can use vh units in modern browsers. Support is 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>