微信小程序—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>
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;
}
上一篇:flex布局 flex:1 详解 下一篇:Flex Basis与Width的区别