小程序在ios10 系统下,对于如下结构的模板: <template>
<view class="test">
<view class="test1">
<view class="child">haha</view>
</view>
<view class="test2"></view>
</view></template>
.test
width: 100%
height: 100%
flex-direction: column
display: flex
.test1
flex 1
width 100%
border 1px solid #000
.child
height 100%
background #fc9153
.test2
width 100%
height 226px
border 1px solid #eee 在ios10的设备下,其展示效果结果如下图所示:
可以看见,在ios10系统下,父元素view.test1的子元素view.child并未充满整个父元素,其实这个问题在web也出现过类似问题,如: 父容器display:flex后,子元素的内部元素height:100%无效解决方法 chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
解决办法是父类容器设置position:relative; 子元素设置:position:absolute;width:100%,height:100%;
|