Question

我正在尝试使用<div>绝对使用bottom=50%在AngularJS / Ionic页面中，如下所示：

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。我imagecontainer的顶部和底部css指的是此高度，但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

离子的页脚组件在屏幕上是固定的，我想你可以尝试实现一个等效的。有关页脚的更多信息：http://ionicframework.com/docs/v1/components/#footer

元素的主要css属性是：

    .bar-footer {
        bottom: 0;
        height: 44px;
    }
    .bar {
        display: flex;
        user-select: none;
        position: absolute;
        right: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 44px;
     }

使用您的特定属性修改上述属性（例如bottom: 50%;），并确保将显示设置为绝对值。

考虑到您父母的定位问题，您应该尝试将您的代码放在<ion-content></ion-content>内，<ion-view></ion-view>内。

这是我成功将按钮定位为离子移动框架内绝对的唯一方法。

编辑：/！\小心不要写<ion-view></ion-view>之外的任何内容。我之前的回答是以离子管理不同页面的方式制造麻烦。

Answer 2

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

position: absolute

必须与ion-content

的外元素一起使用

所以：

<ion-content>
</ion-content>


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


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

离子框架：绝对位置以％为单位不起作用

2 个答案: