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

我最终玩弄了容器中每个父元素的高度。为每个元素提供独特的背景颜色，使测试更容易一些。最后，我的解决方法是在每个父容器上使用我的“全高”类到最里面的子离子行。我觉得这有点像是一种解决方法。但它奏效了。

compile "com.android.support:support-v4:23.1.1"
compile "com.android.support:appcompat-v7:23.1.1"
compile "com.android.support:design:23.1.1"

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

1 个答案: