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

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

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

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

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

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

 <!DOCTYPE html>

 <html >

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

     <meta name="apple-mobile-web-app-capable" content="yes">

     <meta name="apple-mobile-web-app-status-bar-style" content="black">

     <style>

         html,body{

             width:100%;

             height:100%;

             overflow: hidden;

             position: relative;

             padding:0;

             margin:0;

         }

         .container{

             width:100%;

             height:100%;

             overflow-y: scroll;

         }

         .box{

             width:100%;

             margin-bottom:44px;

         }

         .main1{

             width:100%;

             height:1000px;

             background: cadetblue;

         }

         .main2{

             width:100%;

             height:1000px;

             background: forestgreen;

         }

         .bottom{

             position: absolute;

             bottom:0;

             left:0;

             height:44px;

             line-height: 44px;

             width: 100%;

             background: #01a9e9;

             color:#fff;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="box">

             <!--内容区域-->

             <div class="main1"></div>

             <div class="main2"></div>

         </div>

         <div class="bottom">

             <!--底部导航栏-->

             <span>footer</span>

         </div>

     </div>

 </body>

 </html>

注：

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

移动端fixed兼容问题的更多相关文章

  1. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  2. 移动端版本兼容js

    移动端版本兼容js <!--移动端版本兼容 --> <script type="text/javascript"> var phoneWidth = par ...

  3. vue移动端transition兼容

    vue移动端transition兼容 .face-recognition .wrapper(:style="{height: viewHeight+'px'}") .face-re ...

  4. Issues with position fixed & scroll（移动端 fixed 和 scroll 问题）

    转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...

  5. uni-app开发经验分享五： 解决三端页面兼容问题的方法

    在做uni-app开发的过程中,我们最头疼可能不是开发的过程中的逻辑,而是最后要做的三端兼容测试和修改,在我开发的项目中,这一步都是最头疼和令人头秃的过程,这里总结一些个人开发遇到的问题,希望对大家有 ...

  6. APP多版本共存，服务端如何兼容？

    做过APP产品的技术人员都知道,APP应用属于一种C/S架构的,所以在做多版本兼容,升级等处理则比较麻烦,不像web应用那么容易.下面将带大家分析几种常见的情况和应对方式: 小改动或者新加功能的 这种 ...

  7. web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG，完美解决

    [问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...

  8. Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  9. 虚拟键盘冲击移动端fixed布局的解决方案

    在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug ...

随机推荐

  1. 仿站-获取网站的所有iconfont图标

    在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...

  2. 【Spark】这一篇或许能让你大概了解如何通过JavaAPI实现DataFrame的相关操作

    文章目录 需求概述 步骤 一.创建Maven工程并导包 二.选用第一种方法:利用反射机制配合样例类构建DataFrame 开发代码 选用第二种方法:通过StrucType配合Row构建DataFram ...

  3. [POJ1038]状压DP

    题意:给一个n*m的区域,里面有一些障碍物,往里面放2*3和3*2的矩形,矩形之间不能重叠,不能覆盖到障碍物,求能放置的最大个数.(n<=150,m<=10) 思路:看到m=10就应该往状 ...

  4. IDEA 创建Spring项目后org.springframework.boot报错

    IDEA 创建 Spring boot 项目后 ,在pom.xml文件中 org.springframework.boot出错,刷新也没有作用. 如图: 可以降低 org.springframewor ...

  5. linux磁盘已满，查看哪个文件占用多

    1.使用df -h查看磁盘空间占用情况 2.使用sudo du -s -h /* | sort -nr命令查看那个目录占用空间大 3.然后那个目录占用多 再通过sudo du -s -h /var/* ...

  6. 相机测试camera报告的问题

    AE问题 整体偏亮 整体偏暗 高光过爆 暗处过暗 对比度低/高 亮度: 关注暗处过暗 高光过爆   对比度: 关注头发,衣服 对比度低照片会有好像一层薄薄的,发蒙 关注植物,会有灰色的 AWB问题 偏 ...

  7. 【雕爷学编程】Arduino动手做（3）---微波雷达感应开关模块

    37款传感器和模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器与模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...

  8. Python列表,元组,字典,字符串方法笔记

    01. 列表 1.1 列表的定义 List(列表) 是 Python 中使用 最频繁 的数据类型,在其他语言中通常叫做 数组 专门用于存储 一串 信息 列表用 [] 定义,数据 之间使用 , 分隔 列 ...

  9. DRF路由组件和渲染器组件

    参考博客:https://www.cnblogs.com/wupeiqi/articles/7805382.html

  10. 2.3 Go内置函数

    内置函数 Go 语言拥有一些不需要进行导入操作就可以使用的内置函数.它们有时可以针对不同的类型进行操作,例如:len.cap 和 append,或必须用于系统级的操作,例如:panic.因此,它们需要 ...