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

【问题标题】：Ion-footer sticky to ion-content and bottom of screen离子页脚粘在离子含量和屏幕底部
【发布时间】：2017-12-23 21:22:04
【问题描述】：

我想制作 ion-footer，高度取决于内容高度，就像那样

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

但它永远不会填满屏幕上的所有空白空间，我仍然有这样的：

【问题讨论】：

标签： html css ionic2

【解决方案1】：

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 元素。这应该给出类似的布局。

【讨论】：

是的，我需要它，但是这个页脚不会“触摸”到屏幕的右/左和底部（cus 内容是填充
您可以从 ion-content 中删除填充并将其放入 ion-list。这样，页脚 div 元素现在不会得到任何填充。
但是当我们有很多项目（我们需要滚动）时，右边仍然是空白空间（滚动的可能性），这个页脚不粘在底部，应该是什么。
在移动端查看应用时不会出现问题，因为滚动条将处于覆盖模式。
我编辑了最后一条评论，但很可能。你没看到，还有当我们有很多项目时（我们需要滚动），这个页脚不粘底部，应该是什么。

【解决方案2】：

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

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

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

要查看在线示例，我创建了 StackBlitz here。我希望这对您（虽然有点晚）和未来的读者有用。

【讨论】：

谢谢，我的错误是我把 ion-footer 放在了 ion-content 里面，而它应该放在外面 - 这解决了我的问题！

【解决方案3】：

试试

height:100%;

它刚刚对我有用。

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

【讨论】：

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