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

有些人肯定就说了,这还不简单,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. 安卓app开发-02-安卓app快速开发

    安卓app开发-02-安卓app快速开发 上一篇介绍了安卓 app 开发的工具和环境配置,本篇不涉及编程技术,适合小团队快速高效开发 APP制作流程 当有一个APP创意,该如何实现呢?是花数十万找AP ...

  2. volley7--NetworkDispatcher从网络中获取数据

    源码: /* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, V ...

  3. [转载]一步一步教你如何在Virtualbox虚拟机中安装Remix

    原文地址:https://bbs.jide.com/forum.php?mod=viewthread&tid=4892 大神请路过-- [准备工具] 1.Virtualbox虚拟机(这个是免费 ...

  4. 软工读书笔记 week3 (《黑客与画家》上)

    一.何谓黑客? 黑客,在我们大多数普通人眼里,就是入侵计算机的人,通常还与干坏事挂钩.而书中告诉我们,这 并不是它的真正含义.而要想理解这本书,就要首先理解什么是黑客. 黑客这个词最初起源时,完全是一 ...

  5. html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  6. 【转】深入理解 Session 与 Cookie

    Session 与 Cookie 不管是对 Java Web 的初学者还是熟练使用者来说都是一个令人头疼的问题.在初入职场时恐怕很多程序员在面试的时候都被问到过这个问题.其实这个问题回答起来既简单又复 ...

  7. ZT android -- 蓝牙 bluetooth (三)搜索蓝牙

    android -- 蓝牙 bluetooth (三)搜索蓝牙 分类: Android的原生应用分析 2013-05-31 22:03 2192人阅读 评论(8) 收藏 举报 bluetooth蓝牙s ...

  8. 初探BeEF

    1.什么是BeEF? 就是 The Browser Exploitation Framework 的缩写,意在通过一些手段,控制对方的浏览器. 里面集成了很多模块,能够获取很多东西,有cookie,浏 ...

  9. 可以在命令行直接使用密码来进行远程连接和远程拉取文件的命令:sshpass

      应用范围:可以在命令行直接使用密码来进行远程连接和远程拉取文件. 使用前提:对于未连接过的主机.而又不输入yes进行确认,需要进行sshd服务的优化: # vim /etc/ssh/ssh_con ...

  10. bzoj4037 [HAOI2015]数字串拆分

    Description 你有一个长度为n的数字串.定义f(S)为将S拆分成若干个1~m的数的和的方案数,比如m=2时,f(4)=5,分别为4=1+1+1+1你可以将这个数字串分割成若干个数字(允许前导 ...