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

来源:blog.csdn.net 更新时间:2023-05-25 21:55

(1)问题:view样式中设置data-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)效果截图: