移动端web页面底部输入框(固定元素)（软键盘弹出）解决方案

原创于 2018-09-19 15:18:25 发布 · 4.1k 阅读

CC 4.0 BY-SA版权

27 篇文章

订阅专栏

14 篇文章

订阅专栏

本文介绍了一种使用绝对定位布局实现底部固定输入框的方法，并对比了flex布局的不足之处。通过将Header、Footer和Content设置为绝对定位，可以确保即使键盘弹出也不会遮挡输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

底部固定的输入框，如图：
在这里插入图片描述

<div>
  <Header/>  // absolute, top:0
  <Footer/>  // absolute, bottom:0
  <Content/> // absolute, top:0, height:100%, overflow: auto
</div>

Header、Footer、Content互不干扰，都为absolute，
把滚动条放到Content元素上，
键盘怎么弹都没事，稳稳的

这个就算是自然文档流也存在的问题，这样解决：

function onFocus(e){
  setTimeout(function(){e.target.scrollIntoView()},100)
}

曾经试过用flex布局来放置，
Header(固定高) \ Content(自适应) \ Footer(固定高)，
结果发现flex会让Content的滚动非常卡顿,
而absolute就不会

一点点改变有很大的差别

用fixed？不存在的