微信小程序—height: 100% 属性未生效问题

字节跳动校招内推码: C4BDSMC
投递链接: https://job.toutiao.com/s/J691fRK
内推交流QQ群：1049175720

（1）问题：view样式中设置height: 100%未生效
（2）原因：heigt: 100%属性是子节点相对于父容器来说，此属性生效的必要条件是父容器必须具有具体的高度信息
（3）解决方案：从根节点page开始，一直到需要设置的那一层，设置每一层的height属性
（4）代码演示：
wxml:

<view class='container'>
  <view class='navigation'>
    1
  </view>
  <view class='commodity'>
    2
  </view>
</view>

wxss:

page{
  height: 100%;
}
.container{
  display: flex;
  height: 100%;
  line-height: 100%;
  overflow: hidden;
}
.navigation{
  flex: 1;
  height: 100%;
  background-color: yellowgreen;
}
.commodity{
  flex: 3;
  height: 100%;
  background-color: gold;
}

（5）效果截图：