最近做移动端页面，有个需求类似下图
底部导航用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.主题内容底部流出底部导航栏的高度，以免被遮住