flex盒模型实现头部尾部固定

近期做移动app、wap等站，需要头部固定在顶部，不随着内容滚动而滚动
平时第一想法就是使用position:fixed;top:0;z-index:10;这样去实现
但这样使用fixed之后，会在ios系统下,当有input输入框的时候.出现键盘遮盖的问题
为了避免这种情况
则使用flex盒子

-----------------------------------
<div class="wrapper flex flex-v">
<div class="header">我是头部header</div>
<div class="main flex-1">我是中间内容</div>
<div class="footer">我是底部footer</div>
</div>
-----------------------------------
聊聊几行主体结构,上中下布局.无需去写js,无需去应用框架.
无需嵌套很多层结构,也无需很多样式.只需按照之前已经配好的去写俩css样式名即可完美呈现所需效果。
详情demo见附件。
小试牛刀。欢迎拍砖！

下载链接：https://files.cnblogs.com/files/leshao/%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%AE%9E%E7%8E%B0%E5%A4%B4%E9%83%A8%E5%B0%BE%E9%83%A8%E5%9B%BA%E5%AE%9A.rar

多谢@白树等大神的指点