![](/img/trans.png)
[英]Ionic 2 passing data from <ion-content> to <ion-footer> in the same html
[英]Ion-footer sticky to ion-content and bottom of screen
我想做离子页脚,其高度取决于内容高度,就像那样
此外,页脚不能小于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;
}
但它永远不会填满屏幕上的所有空白区域,我仍然喜欢这样:
离子页脚方法在这里不起作用,因为离子页脚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元素。 这应该给出类似的布局。
尝试
height:100%;
它刚刚适用于我。
随着项目的增长或缩减,页脚被延长。
我想提出另一种方法,“更多离子方式”,使用自己的组件而不是div和一些样式规则。
Jay的解决方案通过CSS解决问题,将粘性页脚固定在内容的底部。 但是,我已将组件移出,因此,它将始终保持在页面底部:
<ion-content>
// Page content
</ion-content>
<ion-footer>
// Footer content
</ion-footer>
要查看在线示例,我在这里创建了一个StackBlitz。 我希望这对你有用(虽然有点晚),对于未来的读者。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.