html - ionic 2 : percentage height and set width does not appear in emulator

Question

我的模板中有一个名为 home.html 的 ion-grid 元素，在该网格中有一行三列:

<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

我最终研究了容器中每个父元素的高度。为每个元素赋予独特的背景颜色使测试更容易一些。最终，我的解决方法是在每个父容器上使用我的“全高”类到最里面的子 ionic 行。我觉得这有点变通。但它奏效了。

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