离子滑动框设置高度为不与ios一起使用的百分比

Question

我正在尝试将ion-slide-box设置为具有百分比的修正高度，如下所示。但是，当我尝试做离子服务时，高度百分比不显示在ios中，而只在android中显示。

.slider {
  height: 50%;
}

Answer 1

尝试使用以下代码：

height: 50vh;

适用于iOS和Android。

Answer 2

以下是我如何完成您应该在所有平台上运行的问题的示例：

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  height: 50%;
  flex-direction: column;
}
.header-flex {
  flex: 1;
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="slider-flex">
    <ion-slides>
      <ion-slide-page>
        <div class="box blue">
          <h1>BLUE</h1>
        </div>
      </ion-slide-page>
      <ion-slide-page>
        <div class="box yellow">
          <h1>YELLOW</h1>
        </div>
      </ion-slide-page>
      <ion-slide-page>
        <div class="box pink">
          <h1>PINK</h1>
        </div>
      </ion-slide-page>
    </ion-slides>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;