欢迎您的到来!     
注册用户 [请登录]      新用户 [免费注册]     
网站首页 电子教程 视频教程 在线题库 毕业设计作品 疑难解答 毕设文档
分类
毕业设计
毕设相关资料  
移动开发
WEBAPP   微信小程序  
数据库
SQL   MySQL  
后端开发
ASP   PHP   JSP   NET   Python  
前端JS
JavaScript   jQuery   Vue.js   React.JS   AngularJS  
前端界面
HTML   CSS   Bootstrap  
毕业设计
小程序毕设   Java毕设   PHP毕设  
 文章详情:ios10系统下flex:1的父元素,其子元素height:100%未充满父元素

小程序在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的设备下,其展示效果结果如下图所示:

image.png

可以看见,在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%;



上一篇: onError捕获错误的问题 下一篇: 自定义组件用slot插入cover-view的问题


第一步:学习免费电子文档;   第二步:在线测试考试;   第三步:选择收费视频学习;   第四步:学习技术文章和疑难解答.
友情链接: 网页模板下载  |   微信小程序中文网  |   计算机毕业设计作品网  |   洪荒毕业设计网  |   小白教程网  |   毕业设计资料网  |  
浙ICP备18013434号-3 Copyright ©2020 小白教程网 www.2d5.net (QQ交流群:147415688). Technical support/技术支持:杭州摇亿网络科技