离子页脚粘离子含量和屏幕

的底部我要让离子页脚，这高度将取决于内容的高度，这样的离子页脚粘离子含量和屏幕

此外，页脚不能小于在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; 
}

但它从来没有填满屏幕上的所有空的空间，我仍然有这样的：

来源

2017-07-18 Rafał Gołubowicz

ion-footer方法在这里不起作用，因为ion-footer 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元素。这应该会给出类似的布局。

来源

2017-07-19 06:46:16 Jay

是的，我需要它，但是这个页脚并没有'触摸'到屏幕的右/左和底部（cus内容是填充< - 我需要它） –

您可以从离子内容中移除填充并将其放入离子列表中。这样，页脚div元素现在不会得到任何填充。 – Jay

但它仍然是空的右边的空间（滚动的概率）当我们有很多项目（我们需要滚动）时，这个页脚不粘到底，它应该是什么。 –

尝试

height:100%;

它刚刚为我工作。

页脚随着项目的增长或缩小而延长。

来源

2017-07-19 00:27:08 Eaves12

不，它使页脚填满全屏幕（也是页脚封面内容） –

离子页脚粘离子含量和屏幕

回答

相关问题