Complex Layout with scroll area


i have a problem with my layout. The Scroll view on the bottom should fit the screen to the bottom of the page. A fixed height with height: 30vh work only on some screens.

<ion-view cache-view="false" view-title="Dashboard"> <ion-content> <div> <div id="first-row" class="row"> <div class="col col-33 col-offset-33"> <span>images</span> </div> <div class="col col-33"></div> </div> <div class="row"> <span>some images</span> </div> </div> <div> <div class="row row-no-padding"> <div class="col"> <ion-list> <div class="item item-divider"> Title </div> <ion-scroll direction="y" style="height: 30vh"> <ion-item ng-repeat="item in items" ng-click=""> {{meal.title}} </ion-item> </ion-scroll> </ion-list> </div> </div> <div class="row"> <div class="col text-center"> <button class="button icon ion-plus-round" ng-click=""></button> </div> </div> </div> </ion-content> </ion-view>

Thanks for help

Maybe this solution is working for me.