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

我想一个<div>在AngularJS /离子页面绝对使用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。而我的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>

来源

2014-12-02 Louis

任何解决方案？我有类似的问题。 – 2015-08-26 16:05:11

离子的页脚部分是关于屏幕固定第一的父母，我想你可以尝试实施一个相同的。有关页脚更多信息：http://ionicframework.com/docs/v1/components/#footer

元素的主要CSS-属性是：（如bottom: 50%;）

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

与您的特定的人修改上面的属性，并确保显示器被设置为绝对的。

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

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

编辑：/！\注意不要写任何东西出。我之前的回答是以离子管理不同页面的方式制造麻烦。

来源

2017-03-31 13:20:36 chab42

我真的不知道该回答的问题，而是人与离子和绝对位置挣扎了有价值的信息将是

position: absolute

必须与元素中使用的ion-content外

所以：

<ion-content> 
</ion-content> 


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


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

来源

2017-07-17 21:15:31 Marko

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

回答

相关问题