当前位置:首页 >> 你懂你先说>>正文

【小程序】微信小程序设置height 100%不起作用

栏目:你懂你先说时间:2018-10-19热度:

(1)问题:view样式中设置height: 100%未生效

(2)原因:heigt: 100%属性是子节点相对于父容器来说,此属性生效的必要条件是父容器必须具有具体的高度信息

(3)解决方案:从根节点page开始,一直到需要设置的那一层,设置每一层的height属性


page{
height: 100%;
}
.container{
height: 100%;
width: 100%;
background: red;
display: flex;
flex-flow: row wrap;/*flex-direction和flex-wrap的简写 */
justify-content:space-around;/*元素的对齐方式 默认左对齐 */
align-items: flex-end;
}

解决办法:在上面添加一个page 样式就可以解决

page{
height: 100%;
}
.container{
height: 100%;
width: 100%;
background: red;
display: flex;
flex-flow: row wrap;/*flex-direction和flex-wrap的简写 */
justify-content:space-around;/*元素的对齐方式 默认左对齐 */
align-items: flex-end;
}


热门标签