離子滑塊設置高度以百分比不能與ios一起使用

Question

我想將ion-slide-box設置爲固定高度，百分比如下。然而，當我嘗試做離子服務的百分比不顯示在ios中的高度，但只在android中。

.slider { 
    height: 50%; 
} 

Answer 1

這裏是我如何完成你的要求應在所有平臺上工作的例子：

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

<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>

Answer 2

嘗試使用下面的代碼：

height: 50vh; 

它適用於iOS和Android。