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

底部固定的输入框，如图：

解决方案如下

<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？不存在的