问题描述：
在微信小程序中使用flex实现上中下3行布局铺满整个窗口。
如图
**WXML **
<!--/****HotApp云笔记，基于HotApp小程序统计云后台***免费云后台申请地址 /cloud***API 文档地址：/api***小程序技术讨论QQ群：173063969*/--><!--index.wxml--><view class="container"><view class='title'><input name="title" placeholder-class="placeholder" placeholder="在此输入标题（可选）" value="{{item.value.title}}" /></view><view class='row'><textarea class='text' placeholder-class="placeholder" name="content" focus="{{focus}}" value="{{item.value.content}}" placeholder="点击添加文本" /></view><view class='bottom'><button formType="submit" class='btn success'>保存</button></view></view>
WXSS
/****HotApp云笔记，基于HotApp小程序统计云后台***免费云后台申请地址 /cloud***API 文档地址：/api***小程序技术讨论QQ群：173063969*/page{width: 100%;height: 100%;}.container{flex-flow:column nowrap;justify-content: center;align-items: center;width: 100%;height: 100%;}.title{margin: 15rpx 5%;width: 90%;text-align: center;height: 60rpx;font-size: 38rpx;border-bottom: 1px solid #f5f5f5;}.row{flex: 1;display: flex;width: 90%;height: auto;margin: 0 5%;overflow: hidden;}.row .text{flex: 1;width: 100%;height: auto;font-size: 36rpx;color: #666;}.bottom{width: 100%;background: #fff;display: flex;flex-flow:row nowrap;justify-content: center;align-items: center;}.bottom .btn{flex: 1;line-height: 2;padding-top: 10rpx;padding-bottom: 10rpx;margin: 30rpx 30rpx;}.btn.success{background: #1aad19;color: #fff;}
在wxss里必须加
page{ width: 100%; height: 100%; }
否则container的height: 100%;不起作用从而导致container 的高不能填充满整个窗口。
效果如下：
HotApp云笔记，基于HotApp小程序统计云后台
免费云后台申请地址 /cloud
API 文档地址：/api
小程序技术讨论QQ群：173063969
