ionic variable height ion-scroll

by Niels Krijger

HTML

<script src="http://code.ionicframework.com/1.2.4/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.2.4/css/ionic.css">
<div ng-app="ionicApp">
  <ion-tabs class="tabs-icon-only tabs-positive">
    <ion-tab title="Home" icon="ion-ios7-filing">
      <ion-header-bar class="bar-positive">
        <h1 class="title">Scroll</h1>
      </ion-header-bar>

      <ion-content has-tabs="true" ng-controller="HomeCtrl" scroll="false">
        <div class="profile">
          Profile part
        </div>
        
        <ion-scroll>
          <ion-list ng-if="items.length" class="list">
            <ion-item class="item" ng-repeat="item in items">{{item}}</ion-item>
          </ion-list>
        </ion-scroll>
      </ion-content>
    </ion-tab>
  </ion-tabs>
</div>

CSS

.profile {
  height: 150px;
  background: #f00;
}

ion-scroll {
  height: 100%;
  background: #f0f0f0;
}

.my-item {
  padding-top: 20px;
  padding-bottom: 20px;
}

JavaScript

angular.module('ionicApp', ['ionic'])

.controller('HomeCtrl', function($scope, $ionicModal) {
	$scope.items = [];
  for (var i = 0; i < 100; i++) {
  	$scope.items.push(i);
  }
})