如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击。

有些人肯定就说了,这还不简单,position:fixed;

但是在ios这个坑货系统上这个position:fixed这个css属性就会失效,你懂的,苹果就是搞特殊,下面我就用css来解决这个问题。

1.这个是要滑动的内容的css:

.page-content {
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
}

  暂且我就将它的内容区域命名page-content,即html内容为

<div class="page-content">这个是可以滑动的内容区域</div>

2.这个是固定在页面上的区域:

<div class="scroll-page">这个是按钮</div>

  

.scroll-page{
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background: #f8105c;
color: white;
text-align: center;
line-height: 50px;
font-size: 18px;
z-index: 99;
}

这样的话可以完美解决这个fixed在ios上失效的问题。亲测有效!!!!!!网上搜的其它方法,大都有这样那样的问题

偏前端 - ios下position:fixed失效的问题解决的更多相关文章

  1. ios上position:fixed失效问题

    手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...

  2. iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...

  3. IOS中position:fixed吸底时的滑动出现抖动的解决方案

    H5方法: //吸顶头部 .header{ width:100%; height:50px; position:fixed; top:0px; } //main滑动区域 .main{ width:10 ...

  4. position:fixed 失效

    如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 . 把 transform删除或设置为none就可以解决啦. 但是如果trans ...

  5. ios解决输入框弹出后position:fixed失效问题

    最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题.position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激 ...

  6. iOS下的 Fixed BUG

    input 光标位置乱窜 固定式浮层内的输入框光标会发生偏移.即 fixed 定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面 可触发条件 页面body出现滚动 ...

  7. position:fixed失效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. IE6下position:fixed;兼容

    *html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/ .backto-top{ width ...

  9. IE6下position:fixed不支持问题及其解决方式

    IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...

随机推荐

  1. Java快速入门-03-小知识汇总篇(全)

    Java快速入门-03-小知识汇总篇(全) 前两篇介绍了JAVA入门的一系小知识,本篇介绍一些比较偏的,说不定什么时候会用到,有用记得 Mark 一下 快键键 常用快捷键(熟记) 快捷键 快捷键作用 ...

  2. 使用ZXing实现扫描多个条形码页面

    1.前言 ZXing是google官方推出的跨平台的基于Java实现处理扫面二维码或者条形码的库.支持很多格式,一维条码支持UPC-A,UPC-E,EAN-8,Code 39,Code 93等格式,二 ...

  3. 应用程序和Activity

    Android 应用程序的组成部分 Android应用程序由各个组件组成,并使用Manifest绑定到一起,Manifest描述了每一个组件和它们之间的交互方式,还用于指定权限,硬件,平台以及应用程序 ...

  4. Vue实例对象的数据选项(火柴)

    前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...

  5. Selenium+java项目测试问题整理

    一.页面跳转到另一链接 问题描述:打开页面链接为A.com,但是页面元素需跳转到链接B.com.这时B页面将无法识别该元素,导致拨错 解决方案:重新自定义驱动,打开新链接 (PS:比较笨的解决方法,但 ...

  6. Linux常用命令(一)————查找和替换

    1. 查找一个字符串 一个字符串是一行上的一个或几个字符.    为查找一个字符串,在vi命令模式下键入“/”,后面跟要查找的字符串,再按回车.vi将光标定位在该串下一次出现的地方上.键入n跳到该串的 ...

  7. 简说mvc路由

    首先我们通过在Global.asax中的Application_Start将路由信息注册到RouteTable的Routes静态属性中.如下代码所示: public class RouteTable ...

  8. Python学习---网页爬虫[下载图片]

    爬虫学习--下载图片 1.主要用到了urllib和re库 2.利用urllib.urlopen()函数获得页面源代码 3.利用正则匹配图片类型,当然正则越准确,下载的越多 4.利用urllib.url ...

  9. Python实例---简单购物车Demo

    简单购物车Demo # version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 product_list = ( ['Java ...

  10. Spark 2.x 中 Sort-Based Shuffle 产生的内幕

    本课主题 Sorted-Based Shuffle 的诞生和介绍 Shuffle 中六大令人费解的问题 Sorted-Based Shuffle 的排序和源码鉴赏 Shuffle 在运行时的内存管理 ...