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

利用flex解决input定位的问题的更多相关文章

  1. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  2. 利用gulp解决微信浏览器缓存问题

    做了好多项目,这次终于要解决微信浏览器缓存这个令人头疼的问题了.每次上传新的文件,在微信浏览器中访问时,总要先清除微信的缓存,实在麻烦,在网上搜罗了很多解决办法,终于找到了方法:利用gulp解决缓存问 ...

  3. 解决<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 过长

    解决<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 过长 <i ...

  4. 利用闭包解决for循环里onclick事件不能捕捉实时i值问题

    问题描述 我们都知道,如果我们对于一组元素(相同的标签)同时进行onclick事件处理的时候(在需要获取到索引的时候),一般是写一个for循环,但是onclick是一个异步调用的,所以会带来一个问题, ...

  5. 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  6. html利用锚点实现定位代码实例

    本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平 ...

  7. 利用Readability解决网页正文提取问题

    分享: 利用Readability解决网页正文提取问题   做数据抓取和分析的各位亲们, 有没有遇到下面的难题呢? - 如何从各式各样的网页中提取正文!? 虽然可以用SS为各种网站写脚本做解析, 但是 ...

  8. 利用Json_encode解决中文问题

    利用Json_encode解决中文问题       public function return_json($data=array()){         echo json_encode($data ...

  9. 利用Filter解决跨域请求的问题

    1.为什么出现跨域. 很简单的一句解释,A系统中使用ajax调用B系统中的接口,此时就是一个典型的跨域问题,此时浏览器会出现以下错误信息,此处使用的是chrome浏览器. 错误信息如下: jquery ...

随机推荐

  1. Petrozavodsk Winter Training Camp 2017G(栈)题解

    题意: \(M_i\)为一个\(m*m\)矩阵,已知 \[\begin{aligned} &M_0=A\\ &M_i=(\prod_{j=c_i}^{i+1}M_j)B \end{al ...

  2. js Nullish Coalescing Operator

    js Nullish Coalescing Operator 空值合并 const n = null ?? 'default string'; console.log(n); // "def ...

  3. shit leetcode edge testcases

    shit leetcode edge testcases Merge Intervals try "use strict"; /** * * @author xgqfrms * @ ...

  4. HTML5 drag & drop & H5 DnD

    HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...

  5. free useful skills videos courses & tutorials

    free useful skills videos courses & tutorials website video courses https://realpython.com/ http ...

  6. TS type different String / string

    TS type different String / string String / string https://stackoverflow.com/questions/14727044/types ...

  7. Linux零拷贝技术

    本文转载自Linux零拷贝技术 导语 本文讲解 Linux 的零拷贝技术,云计算是一门很庞大的技术学科,融合了很多技术,Linux 算是比较基础的技术,所以,学好 Linux 对于云计算的学习会有比较 ...

  8. 【commons-pool2源码】_pre JMX

    目录 一.定义 二.demo 三.JMX在commons-pool2中的应用 一.定义 JMX(Java Management Extensions) 简单来说JMX技术提供了一套轻量的标准化的资源管 ...

  9. 源码分析:Phaser 之更灵活的同步屏障

    简介 Phaser 是 JDK 1.7 开始提供的一个可重复使用的同步屏障,功能类似于CyclicBarrier和CountDownLatch,但使用更灵活,支持对任务的动态调整,并支持分层结构来达到 ...

  10. 从Java的堆栈到Equals和==的比较

    以下为链接 https://www.2cto.com/kf/201503/383832.html 栈与堆都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地 ...