离子页脚粘在离子含量和屏幕底部

时间:2017-07-18 20:24:17

标签: html css ionic2

我想制作离子页脚,其高度取决于内容高度,就像那样

how should it works

此外,页脚不能小于2图像(最小高度)。

动态生成内容(ion-list * ngFor)。 这是我目前的伪代码

<ion-header>
  <ion-navbar>
    <ion-title>
      Title
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let item of items">
      {{ item.name}}
    </button>
  </ion-list>
</ion-content>

<ion-footer class="footer">
</ion-footer>

CSS:

.footer{
  background-color: blue;
  min-height: 10em;
  height: auto;
}

但它永远不会填满屏幕上的所有空白区域,我仍然喜欢这样:

how it works

3 个答案:

答案 0 :(得分:3)

离子页脚方法在这里不起作用,因为离子页脚CSS样式具有绝对定位。这意味着它的高度不能相对于离子含量高度。

可以通过使用flex的不同方法实现所需的布局。

<ion-content >
 <div style=" display: flex;flex-direction: column;height: 100%;">
     <ion-list padding-horizontal padding-top style="overflow-y: scroll;max-height: 90%;">
       <button ion-item *ngFor="let item of items">
       {{ item.name}}
      </button>
     </ion-list>
     <div style="flex: 1;background-color: blue;">Footer</div>
 </div>
</ion-content>

从HTML中删除ion-footer元素。 这应该给出类似的布局。

答案 1 :(得分:-1)

尝试

height:100%;

它刚刚适用于我。

随着项目的增长或缩减,页脚被延长了。

答案 2 :(得分:-2)

我想提出另一种方法,“更多离子方式”,使用自己的组件而不是div和一些样式规则。

Jay的解决方案通过CSS解决问题,将粘性页脚固定在内容的底部。但是,我已将组件移出,因此,它将始终保持在页面底部:

<ion-content>
  // Page content
</ion-content>
<ion-footer>
  // Footer content
</ion-footer>

要查看在线示例,我创建了一个StackBlitz here。我希望这对你有用(虽然有点晚),以及未来的读者。