首頁 > 開發者 > JavaScript
ios解決輸入框彈出後position:fixed失效問題，iosfixed
最近在使用AmazeUI進行仿App Mobile Web開發時遇到了討論眾多的position:fixed問題。position:fixed在安卓2.2以上已經實現，但是在ios8以下系統當小鍵盤啟用時，會出現位置錯位的問題。
如：
受到CSDN上劉華童鞋（http://my.csdn.net/liu__hua）的啟發，找到了目前位置比較完美的解決方案。
<!DOCTYPE html><html lang="zh_cmn"><head><meta charset=utf-8 /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /><title></title><style>.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}.head{top:0;}.foot{bottom:0;}.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}</style></head><body><header class="head">頂部固定地區</header><article class="main" id="wrapper"> <div> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> </div></article><footer class="foot">底部固定地區</footer></body></html>
當小鍵盤出現時頭部、底部自動跳到頁面最頂端、最底端。鍵盤隱藏時又會固定在頭部，底部。
內容轉載於：http://blog.csdn.net/liu__hua/article/details/40106595
以作記錄。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
