Thick footer causing slide box missing bottom

I want to change the height of Ionic footer and use slide box. But Slide box implementation doesn't allow changing footer height.

This is the normal height. You can see the bottom text:

enter image description here

This is when I increased the height and if I scroll to bottom, the text is underneath the thick footer:

enter image description here

So how I change the dimension of the slide box so that it's offset on bottom to account for the new footer height?

My code: http://codepen.io/hawkphil/pen/Bybmgg

HTML:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Test</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController">
    <ion-header-bar align-title="center" class="bar-positive">
  <h1 class="title">Dynamic Slides</h1>
</ion-header-bar>

    <ion-content has-header="true" has-footer="true">
<ion-slide-box active-slide="myActiveSlide">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
    <img src="http://placehold.it/350x500">
    <p>This text is not showing</p>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>
    </ion-content>

    <ion-footer-bar class="bar-dark thick-footer">
  <h1 class="title">Title!</h1>
</ion-footer-bar>
  </body>
</html>

JS:

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

.controller('SlideController', function($scope) {

  $scope.myActiveSlide = 1;

})

CSS:

.slider-slide {
  padding-top: 80px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pink {
  background-color: pink;
}

.thick-footer {
  height: 90px!important;
}