html - ionic 页脚粘在 ion-content 和屏幕底部

Question

我想制作 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;
}

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

Answer 1

ion-footer 方法在这里不起作用，因为 ion-footer CSS 样式具有绝对定位。这意味着它的高度不能与 ion-content 高度相关。

所需的布局可以通过使用 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 元素。这应该会给出类似的布局。