离子：从底部定位按钮答案

【问题标题】：Ionic: position button from bottom离子：从底部定位按钮
【发布时间】：2019-12-27 02:29:26
【问题描述】：

在 ionic 中，我怎样才能在底部离子含量的某个百分比处放置一个按钮？

我试过了

<ion-view>
   <ion-content>
       <div class="button-bottom">
         <button class="button button-block button-energized">Button</button>
       </div>
   </ion-content>
</ion-view>

css:

.button-bottom{
position: absolute;
bottom: 30%;
}

但按钮现在没有占据整个宽度。

【问题讨论】：

标签： html css ionic-framework

【解决方案1】：

试着给你的容器一个明确的宽度：

.button-bottom{
position: absolute;
bottom: 30%;
width: 100%;
}

【讨论】：

【解决方案2】：

在button 中添加“full”变量

例如：- button class="button button-block button-energized" full >Button</button>

如需更多参考，请参阅以下链接中有关 UI 组件的 Ionic 文档。

Ionic Full Button

【讨论】：

【解决方案3】：

只需将按钮移到离子内容之外。

例子：

离子 3：

<ion-view>
   <ion-content>

   </ion-content>

       <div class="button-bottom">
         <button class="button button-block button-energized">Button</button>
       </div>

</ion-view>

离子 4：

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<p> your content </p>

</ion-content>

<ion-row>
  <ion-col>
    <ion-button>
      Button Bottom (Not fixed on scroll)
    </ion-button>
  </ion-col>
</ion-row>

【讨论】：