css 搞定input框使用fixed下输入的问题

最新推荐文章于 2025-06-22 22:51:06 发布

原创最新推荐文章于 2025-06-22 22:51:06 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #css3 #es6 #html5

uni-app 同时被 3 个专栏收录

12 篇文章

订阅专栏

小程序商城

7 篇文章

订阅专栏

element

3 篇文章

订阅专栏

在移动端H5聊天应用开发中，遇到input框使用position:fixed在苹果手机上出现兼容性问题，表现为输入框位置错乱或消失。通过面向百度编程尝试多种解决方案后，采用flex布局实现了简单且兼容的处理方式。将页面分为列表滚动区和输入区，设置外部盒子为flex布局，列表区自动撑开，输入区固定高度。此方案目前运行稳定，未发现bug。

最近在做移动端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，小伙伴可以自行体验下

点击体验