移動端開發仿app頭部底部固定設置position:fixed，android2.2以上已經實現。但是在ios8以下系統，當小鍵盤激活時，都會出現位置浮動問題。如圖：
如何解決：
查閱資料之後想到一下幾種解決方法
1，使用position：absolute模擬
<script type="text/javascript">
window.onscroll=function(){
$(".fixed").css("top",$(window).scrollTop());
$(".foot").css("top",$(window).scrollTop()+$(window).height());
}
</script>問題來了：滑動頁面時頭部底部div會有明顯的抖動。
2，判斷當前獲得焦點元素是input則隱藏div改爲position：absolute
<body onload=setInterval("a()",500)>
<script type="text/javascript">
function a(){
if(document.activeElement.tagName == 'INPUT'){
$(".fixed").css({'position': 'absolute','top':'0'});
} else {
$(".fixed").css('position', 'fixed');
}
}
</script>問題來了:不停監控dom，消耗資源。如果input個數較少，可在input裏面添加onfocus事件好一些。
3，插件iscroll.js個人感覺不是很好用。可能方法不對，jQuery Mobile 沒嘗試，感覺會增負擔。
4，重點來了：
只需要在中間部分外層div添加css樣式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以實現效果，無需插件。可拷貝下面代碼運行。
<!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