离子2：百分比高度和宽度设置没有出现在模拟器

Question

我有一个离子栅元件在我的模板名为home.html的，内网格为一个三列的行：

<ion-row> 
    <ion-col>...</ion-col> 
    <ion-col width-10> 
    <ion-row class="full-height j-a-center"> 
     <div class="vrt-line"></div> 
    </ion-row> 
    </ion-col> 
    <ion-col>...</ion-col> 
</ion-row> 

了“ ...'ion-cols在chrome和ios仿真器中正确显示所有内容。但是，当我模拟ios时，vrt-line div不显示任何东西，除非我使用静态高度而不是百分比，即使如此，vrt-line div也不会在该行中居中。我在整个应用程序中使用了相同的“技术”，这是唯一存在问题的地方。

.full-height { 
    height: 100%; 
    min-height: 100%; 
} 

.j-a-center { 
    align-items: center; 
    justify-content: center; 
} 

// Works in chrome, but nothing shows up in emulator. However, all of the spacing with ion-cols are correct. 
.vrt-line { 
    width: 2px; 
    height: 100%; 
    background: #ffffff; 
    position: relative; 
} 

//Line appears in both emulator and chrome, but is not centered/aligned in emulator. 
.vrt-line { 
    width: 2px; 
    height: 100px; 
    background: #ffffff; 
    position: relative; 
} 

任何想法？

Answer 1

我最终玩弄了每个父元素到容器的高度。给每个元素一个独特的背景颜色使测试更容易一些。最终，我的解决方案是将每个父容器上的“全高”类应用到最内层的子离子行。我感觉到这是一种解决方法。但它的工作。

<ion-grid class="full-height"> 
    <ion-row class="full-height"> 
    <ion-col>...</ion-col> 
    <ion-col width-10 class="full-height"> 
     <ion-row class="full-height j-a-center"> 
      <div class="vrt-line"></div> 
     </ion-row> 
    </ion-col> 
    <ion-col>...</ion-col> 
    </ion-row> 
</ion-grid>