title: Ionic2 button must stick to the bottom of the page
body: <p>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.</p>
  
  <p><a href="https://plnkr.co/edit/iuQgXs" rel="nofollow noreferrer"><strong>Plunker is here</strong></a></p>
  
  <p><strong>page1.ts</strong></p>
  
  <pre><code>    &lt;ion-content padding class="page1"&gt;
        &lt;ion-list no-lines&gt;
          &lt;ion-item class="background-color-light-gray"&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
            &lt;ion-card&gt;
              &lt;ion-card-content&gt;
                &lt;h2 color="primary"&gt;My Event&lt;/h2&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
          &lt;/ion-item&gt;
        &lt;/ion-list&gt;
      &lt;/ion-content&gt;
    &lt;div class="fixed-outside"&gt;
      &lt;button ion-button block&gt;Donate&lt;/button&gt;
    &lt;/div&gt;,
      })
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.fixed-outside {
              position: absolute;
              bottom: 0;
              color: white;
              width: 100%;
              height: 120px;
              text-align: center;
          }
  </code></pre>