Ionic framework : position absolute with bottom in % doesn't work

I am trying to absolutely position a <div> using bottom=50% in an AngularJS/Ionic page as follows:

HTML template:

<ion-view title="BoardLine">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

        <div id="imagecontainer">
            <img id="boardimage" ng-src="{{mainResultImagePath}}" />
            <div id="photocredits" class="rotateimagecredits" >Image courtesy: {{computed.prophotocredits}}</div>
        </div>
...

CSS:

#imagecontainer {
    position:absolute;
    top:3%;
    left:0;
    right:62%;
    bottom:50%;
}
#boardimage {
    position:absolute;
    left:10%;
    max-width:85%;
    bottom:0;
    height:100%;
}

but just before div id="imagecontainer", Ionic generates a div class="scroll" like below, which has a height of 20px. And the top and bottom css for my imagecontainer refer to this height... But the div class="scroll" has a position = static.... Therefore my imagecontainer absolute positioning should refer to "the first parent that has a non-static position"...which should be the <ion-content.... there is a css issue here !!

<ion-content class="scroll-content ionic-scroll  has-header">
    <div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
        <div id="imagecontainer">
            <img id="boardimage" ng-src="./img/boards/SD360.jpg" src="./img/boards/SD360.jpg">
            <div id="photocredits" class="rotateimagecredits ng-binding">Image courtesy: john carper</div>
        </div>

Can you help ?

Thanks