利用flex解决input定位的问题

用简单的布局搞定input框使用fixed下输入的问题

最近在做移动端H5聊天应用发现，当input框在最底部并且使用 position:fixed 属性的时候在苹果手机中会出现不兼容的情况

 

 

 

大概布局就是上面是列表 底部是input并基于浏览器定位放置于最底部

当点击输入框的时候会出现input位置错乱的情况

 

 

这里出现了上移的情况

 

 

这里出现了消失的情况，得滑动到最底下才会出现

 

在经过一系列的面向百度编程后，各种监听input是否聚焦在写相应的事件再去对input做一些位置上的定义，我感觉好麻烦，也非常繁琐，最后我实践出一个相对比较完美的方案并且只用``` flex ```布局就可以轻松的实现

首先把页面分割成两个块组成列表滚动区和输入区

 

 

首先把最外部的盒子设为``` flex ``` 盒子并且纵向排列,高度设为100%，就是和窗口一样大小，高度获取可以利用绝对定位或者给body设置100%高度继承下来等等方法

.box{

    display:flex;

    flex-direction: column;

    height:100%

}

这样就纵向排列了，把滚动区的盒子自动撑开就行了

.list{

    flex: 1;

    width: 100%;

    overflow-y: scroll;

    -webkit-overflow-scrolling:touch;

}

底部设置高度

.foot{

    width: 100%;

    height: 100rpx;

    background: #fff;

}

这样就大功告成了目前项目运行中，暂未发现bug，小伙伴可以自行体验下

 

最后打一波广告：

CRMEB商城一个免费开源项目

移动端使用uni-app框架目前已经适配公众号、小程序、app(暂未发布)

管理后台使用vue+iview框架

开源不易，希望各位关注下，说不定你会有意外收获！

地址：http://github.crmeb.net/u/qiang