底部固定的輸入框，如圖：

解決方案如下

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