離子頁腳粘離子含量和屏幕

的底部我要讓離子頁腳，這高度將取決於內容的高度，這樣的離子頁腳粘離子含量和屏幕

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

不，它使頁腳填滿全屏幕（也是頁腳封面內容） –

離子頁腳粘離子含量和屏幕

回答

相關問題