乐趣区

关于前端:利用flex解决input定位的问题

jiezi

用简略的布局搞定 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

退出移动版