Ionic2 button must stick to the bottom of the page

Question

Can you tell me how to fixed a button bottom of the page? At this moment it stays end of the item list.I need to set the button stays on the bottom of the page(or screen) while the user can scroll the items.I'm using 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

You need to use ion-footer, for example

<ion-content></ion-content>

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