相信大家在移動開發的時候，都會遇到一個“固定”的問題。那就是什麼頭部固定在屏幕頂部啊、什麼尾部固定在屏幕的尾部啊這些鬼東西。。。或者你現在看到這裏會想到:這還不簡單嗎？直接用個position:fixed不就搞好了嗎，那麼菜還來寫文章。或者你沒想到，雖然position:fixed是可以固定位置，但是在IOS下會出現這樣的問題（如下圖）。
只要IOS鍵盤出現，position:fixed的固定效果就會被破壞了。我上網找了很多資料，都是說使用position:absolute來代替position:fixed來代碼固定位置，而且還要計算滾動的位置，兼容性又不是很好（這麼多問題和麻煩）。那麼這個問題怎麼解決呢？我就不賣關子了，直接上代碼了。。。
<!DOCTYPE html>
<html>
<head>
<title>移動端上下固定定位</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0 auto;
padding:0;
-webkit-box-sizing:border-box;
}
.fixed_scroll_header{
position:absolute;
top:0;
left:0;
right:0;
z-index:111
}
.fixed_scroll_body{
position:absolute;
left:0;
right:0;
top:40px;
bottom:70px;
-webkit-overflow-scrolling:touch;
overflow-y:auto;
}
.fixed_scroll_footer{
position:absolute;
left:0;
right:0;
bottom:0;
}
.t_c{
text-align:center;
}
.m_tb_15{
margin:15px 0px;
}
.header{
height:40px;
background:#30a9d6;
font-size:16px;
border-bottom:1px solid #c9c9c9;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
position:relative;
}
.header .header_title{
color:#ffffff;
height:40px;
line-height:40px;
padding:12px 0px;
}
.header_left{
position:absolute;
top:0px;
left:0px;
}
.header_right{
position:absolute;
top:0px;
right:0px;
}
.header_right .literal{
padding:10px 15px;
width:40px;
height:40px;
line-height:40px;
color:#ffffff;
}
.button{
width:90%;
height:40px;
line-height:40px;
background:#30a9d6;
color:#ffffff;
border-radius:5px;
display:block;
margin-left:5%;
text-align:center;
}
</style>
</head>
<body>
<div class="fixed_scroll_header">
<div class="header">
<div class="header_left">
<a href="javascript:history.go(-1);">
後退
</a>
</div>
<div class="t_c">
<span class="header_title">Test</span>
</div>
</div>
</div>
<div class="fixed_scroll_body">
<div style="padding:0px 15px;">
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
<div style="margin:30px 0px;">
<input type="text" value="">
</div>
</div>
</div>
<div class="fixed_scroll_footer">
<div class="m_tb_15">
<a href="javascript:void(0);" class="button" id="submit_attention">提交</a>
</div>
</div>
</body>
</html>