Ionic2按鈕必須堅持頁面底部

Question

你能告訴我如何修復頁面的按鈕底部？此時它停留在項目列表的末尾。我需要設置按鈕停留在頁面（或屏幕）的底部，而用戶可以滾動項目。我正在使用Ionic2。

Plunker is here

page1.ts

<ion-content padding class="page1"> 
     <ion-list no-lines> 
     <ion-item class="background-color-light-gray"> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
      <ion-card> 
      <ion-card-content> 
       <h2 color="primary">My Event</h2> 
      </ion-card-content> 
      </ion-card> 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    <div class="fixed-outside"> 
    <button ion-button block>Donate</button> 
    </div>, 
    }) 

CSS

.fixed-outside { 
      position: absolute; 
      bottom: 0; 
      color: white; 
      width: 100%; 
      height: 120px; 
      text-align: center; 
     } 

Answer 1

您需要使用的離子尾，例如

<ion-content></ion-content> 

<ion-footer> 
    <ion-toolbar> 
    <button ion-button block>Donate</button> 
    </ion-toolbar> 
</ion-footer>