如何在 ionic 2 应用程序中将按钮设置到屏幕底部答案

【问题标题】：How to set button to the bottom of the screen in ionic 2 application如何在 ionic 2 应用程序中将按钮设置到屏幕底部
【发布时间】：2019-08-08 13:11:40
【问题描述】：

试图在 ionic 2 应用程序中将一个按钮固定到屏幕底部，但我不知道为什么它在按钮后占用了一个空格。我尝试了很多方法，甚至更改了关于按钮的 main.css，但无法修复它。请帮忙，我想把它贴到底部没有空格.

我使用的代码：

</ion-content>
<ion-footer no-padding style="margin:0rem 0rem!Important;">
  <button ion-button block color="Dark" (click)="pushPage()">Explore</button>
  </ion-footer>

<ion-footer> 保留在<ion-content> 之外，以使按钮在滚动时固定。即使删除“margin”和“no-padding”也没有发现效果。

【问题讨论】：

标签： button ionic-framework alignment

【解决方案1】：

在 app.scss（或相对的 .scss）中添加以下代码：

.footer{
    button{
        margin-bottom: 0px;
    }
}

【讨论】：

【解决方案2】：

另一种方法是使用Ionic CSS utilities，并且根本不要触摸app.scss。

<ion-footer class="ion-no-padding ion-no-margin">
  <ion-button class="ion-no-margin" block color="Dark" (click)="pushPage()">Explore</ion-button>
</ion-footer>

【讨论】：