离子框架：位置绝对，底部在 % 中不起作用

Question

我试图在 AngularJS/Ionic 页面中定位一个<div>绝对使用bottom=50%，如下所示：

HTML：

<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%;
}

但就在 之前div id="imagecontainer"，Ionic 生成一个div class="scroll"，如下所示，高度为 20px。我的顶部和底部 cssimagecontainer指的是这个高度，但div class="scroll" 有一个position:static. 因此，我的imagecontainer绝对定位应该是指具有非静态位置的第一个父级， 它应该是<ion-content>

<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>

Answer 1

我不太确定这能回答一个问题，但是对于那些在 Ionic 和绝对位置上苦苦挣扎的人来说，一个有价值的信息是

position: absolute

具有一个与元件一起使用以外的ion-content

所以：

<ion-content>
</ion-content>


<div class="bottom">
</div>


.bottom {
    position: absolute;
    bottom: 0px;
    width: 100%;
}