離子頁腳粘在離子含量和屏幕底部

Question

我想做離子頁腳，其高度取決於內容高度，就像那樣

此外，頁腳不能小於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

離子頁腳方法在這里不起作用，因為離子頁腳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元素。 這應該給出類似的布局。

Answer 2

嘗試

height:100%;

它剛剛適用於我。

隨着項目的增長或縮減，頁腳被延長。

Answer 3

我想提出另一種方法，“更多離子方式”，使用自己的組件而不是div和一些樣式規則。

Jay的解決方案通過CSS解決問題，將粘性頁腳固定在內容的底部。 但是，我已將組件移出，因此，它將始終保持在頁面底部：

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

要查看在線示例，我在這里創建了一個StackBlitz。 我希望這對你有用（雖然有點晚），對於未來的讀者。