移动端fixed兼容问题

最近做移动端页面，有个需求类似下图

底部导航用fixed定位时在部分iOS版本中会有问题：

1.上滑是底部会跟着滑动，手指松开时才会又回到底部

2.软键盘唤起的情况下，也会出现许多莫名其妙的问题

网上搜了下，iOS确实对fixed兼容不是很好

参考了framework7框架上底部悬浮效果，有如下解决方案：

 1 <!DOCTYPE html>
 2 <html >
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
 6     <meta name="apple-mobile-web-app-capable" content="yes">
 7     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 8 
10     <style>
11         html,body{
12             width:100%;
13             height:100%;
14             overflow: hidden;
15             position: relative;
16             padding:0;
17             margin:0;
18         }
19         .container{
20             width:100%;
21             height:100%;
22             overflow-y: scroll;
23         }
24         .box{
25             width:100%;
26             margin-bottom:44px;
27         }
28         .main1{
29             width:100%;
30             height:1000px;
31             background: cadetblue;
32         }
33         .main2{
34             width:100%;
35             height:1000px;
36             background: forestgreen;
37         }
38         .bottom{
39             position: absolute;
40             bottom:0;
41             left:0;
42             height:44px;
43             line-height: 44px;
44             width: 100%;
45             background: #01a9e9;
46             color:#fff;
47         }
48     </style>
49 </head>
50 <body>
51     <div class="container">
52         <div class="box">
53             <!--内容区域-->
54             <div class="main1"></div>
55             <div class="main2"></div>
56         </div>
57         <div class="bottom">
58             <!--底部导航栏-->
59             <span>footer</span>
60         </div>
61     </div>
62 </body>
63 </html>

注：

1.主题内容底部流出底部导航栏的高度，以免被遮住