Ionic scroll area extends beyond the screen boundaries - html

Question

I have a page that I am trying to split into two sections using Ionic elements etc.: The top section is fixed, and has a set number of items that will not change, and the bottom section should be a scroll-able list.
Also, I want to use an ion-refresher for the entire screen (of course if the user were to try and pull down on the bottom section, this would just scroll through that section..)
The problem I have is that when using an ion-scroll element for the bottom section, the scroll-able area extends beyond the bottom of the screen which means the bottom elements of the list are never view-able. Why is this?
Code:
<ion-content overflow-scroll="false">
<ion-refresher
pulling-text="Pull to refresh..."
ion-refresh="refresh()">
</ion-refresher>
<ion-list>
<ion-item class="item item-icon-left" href="#/somewhere">
<i class="icon ion-icon"></i> Content
<span class="badge badge-assertive>1</span>
</ion-item>
<ion-item class="item item-icon-left" href="#/somewhere">
<i class="icon ion-icon"></i> Content
<span class="badge badge-assertive">2</span>
</ion-item>
<ion-item class="item item-icon-left" href="#/somewhere">
<i class="icon ion-icon"></i> Content
<span class="badge badge-assertive">3</span>
</ion-item>
</ion-list>
<div id="myDivider" class="item-divider">
<i class="icon ion-icon"></i> I'm a divider
</div>
<ion-scroll id=myBottomScroll">
<ion-list>
<ion-item ng-repeat="item in myItems"
class="item" href="#/somewhere/{{item.id}}">
<i class="icon ion-icon"></i>
<i class="icon ion-icon"></i> {{alert.What}}
<i class="icon ion-icon" style="float: right"></i>
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>