关于父元素如何占满一屏的问题（小程序兼容iphonex的实例讲解）

先看实例gif

 实例介绍

• 图一：

这是上传证件的功能，有很多证件，当用户勾选了某个证才出现上传该证件的入口，在用户未选择任何证件的时候我们看到的一屏是分两种颜色的，#fff+#F5F5F9

• 图二： 

当未选择任何证件的时候，我们看到的就是上图，相当于证书组容器内容撑不满父容器,父容器背景色为#F5F5F9，这时导致上图区域颜色为#fff，此时我们有一个办法就是让父容器的高度等于page的高度，即：

.step-three
  background #F5F5F9
  height 100%

由于底部按钮组是fixed定位的，不会占据父容器的区域，此时就实现了上图我们看到的效果

• 图三： 

紧接着，当我们选择证件大于等于两个时，此时子元素加起来的高度已经超过一屏了，这时底部按钮组会遮盖父容器里面的底部内容这时需要在父容器上设置： 

.full-height:not(.is-iphonex)
  height auto
  padding-bottom 144rpx

144rpx的由来：124rpx为下方按钮组的高度，20rpx为上图小灰条的高度，这里的类名is-iphonex我们先不管，接下来讲到兼容iphonex的时候会详细讲解 ，上面选择器的意思是给类名为full-height且同时该元素上不存在类名为is-iphonex的元素设置上面的属性，接下来和大家讲解如何动态给父容器加full-height类名

<div class="step-three" :class="{'is-iphonex':isIphoneX, 'full-height':(tempList && tempList.length>1)}">
    <!-- 这里面放的是相关子元素，这里就不详细写出 -->
</div>

tempList数组为用户选中想上传的证书数组，即下面图片的红框区域容器：

• 图四： 

当tempList数组长度大于等于2时，我们给父容器加上类名full-height，如果在tempList为空的时候就给父容器加上 :

代码一： 

.step-three
  background #F5F5F9
  height 100%
  padding-bottom 144rpx

 或代码二：

.step-three
  background #F5F5F9
  height calc(100% - 144rpx)
  padding-bottom 144rpx

代码一的问题：初始状态下页面就可以滚动，但是页面本身是没有撑满的，这种体验效果很差

代码二的问题：初始状态下确实没问题，但一旦tempList长度超过两个时按钮组上方的小灰条会变成#fff，即图三的红框区域会变成#fff，这与设计图不符，#fff是继承自父容器的父容器即<page> 

 适配iPhoneX

• 图五：

 上对比面两张图片我们可以看到，iPhoneX的底部黑条会遮住小程序内容区，我的解决方案是，通过小程序wx.getSystemInfoSync()读取设备信息，然后如果是iPhoneX就给父容器添加is-iphonex的类名，在原始padding-bottom基础上加60rpx，同时给按钮组也加上padding-bottom:60rpx；（按钮组组件的代码暂时省略）css如下：

.is-iphonex.full-height
  height auto
  padding-bottom 204rpx

 这里，两个类名挨着写表示当这两个类名同时存在时，相关的属性才生效，iPhoneX的效果如下图：

总结

虽然是很小的功能，但细节之处不容马虎，工作中这种问题碰到的不止一次两次，因此觉得有必要写下来防止以后碰到同样的问题依旧从头开始思考，降低工作效率，也希望本文能对大家有所帮助。