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

最新推荐文章于 2025-03-05 09:53:52 发布

原创最新推荐文章于 2025-03-05 09:53:52 发布 · 5.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#height:100%

微信小程序专栏收录该内容

2 篇文章

订阅专栏

字节跳动校招内推码: 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）效果截图：