Ionic 3按钮高度调整：如何让按钮填充全部可用空间

嘿，我来帮你搞定这个按钮高度的问题！先提个小细节：你代码里的botton是拼写错误，要改成button哦，不然可能会影响样式正常生效~

要让按钮填充所有可用空间，主要有两种实用方法，你可以根据自己的布局需求来选：

方法一：自定义CSS强制高度填充 #

如果按钮的父容器已经有明确的高度（比如占满整个页面、某个固定高度的容器），可以给按钮加自定义样式来强制高度占满：

1. 先修改按钮的HTML，添加一个自定义类名：

<button class="ion-button block full-height-button"> Production </button>

2. 在对应页面的SCSS文件（比如your-page.page.scss）里添加样式：

.full-height-button {
  height: 100%;
  /* 如果需要去掉默认内边距，让按钮更贴合容器，可以加上这两行 */
  --padding-start: 0;
  --padding-end: 0;
}

⚠️ 注意：这种方法的前提是按钮的父元素必须设置了高度（比如height: 100vh或者固定像素高度），否则height: 100%不会生效。

方法二：用Ionic网格系统实现空间平分 #

如果你的三个按钮是要垂直排列并平分整个页面的高度，用Ionic自带的ion-grid、ion-row和ion-col会更省心，不需要额外写太多CSS：

<ion-grid class="page-grid">
  <ion-row class="button-row">
    <ion-col class="button-col">
      <button class="ion-button block"> Production </button>
    </ion-col>
    <ion-col class="button-col">
      <button class="ion-button block"> 第二个按钮 </button>
    </ion-col>
    <ion-col class="button-col">
      <button class="ion-button block"> 第三个按钮 </button>
    </ion-col>
  </ion-row>
</ion-grid>

然后在SCSS文件里配置网格和列的样式：

.page-grid {
  height: 100vh; /* 让网格占满整个视口高度 */
}

.button-row {
  height: 100%;
  flex-direction: column; /* 让列垂直排列 */
}

.button-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-col button {
  width: 100%;
  height: 80%; /* 可以根据需求调整按钮在列内的高度占比 */
}

这样每个ion-col会自动平分整个行的高度，按钮再占满列的宽度和设置的高度，就能完美实现填充可用空间的效果啦~

内容的提问来源于stack exchange，提问作者user2214445