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>