最近在做移動端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，小伙伴可以自行體驗下
點擊體驗
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/277071.html
標籤：其他
上一篇：CodeForces - 560E Gerald and Giant Chess(組合數學+dp)
下一篇：求助 為什么報錯空指標