利用flex解決input定位的問題

用簡單的佈局搞定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