我的模板中有一个名为 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;
}
有什么想法吗?
最佳答案
我最终研究了容器中每个父元素的高度。为每个元素赋予独特的背景颜色使测试更容易一些。最终,我的解决方法是在每个父容器上使用我的“全高”类到最里面的子 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>
关于html - ionic 2 : percentage height and set width does not appear in emulator,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41399574/