偏前端 - ios下position:fixed失效的问题解决
如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击。
有些人肯定就说了,这还不简单,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失效的问题解决的更多相关文章
- ios上position:fixed失效问题
手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...
- iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...
- IOS中position:fixed吸底时的滑动出现抖动的解决方案
H5方法: //吸顶头部 .header{ width:100%; height:50px; position:fixed; top:0px; } //main滑动区域 .main{ width:10 ...
- position:fixed 失效
如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 . 把 transform删除或设置为none就可以解决啦. 但是如果trans ...
- ios解决输入框弹出后position:fixed失效问题
最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题.position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激 ...
- iOS下的 Fixed BUG
input 光标位置乱窜 固定式浮层内的输入框光标会发生偏移.即 fixed 定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面 可触发条件 页面body出现滚动 ...
- position:fixed失效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- IE6下position:fixed;兼容
*html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/ .backto-top{ width ...
- IE6下position:fixed不支持问题及其解决方式
IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...
随机推荐
- 线性表接口的实现_Java
线性表是其组成元素间具有线性关系的一种线性结构,对线性表的基本操作主要有插入.删除.查找.替换等,这些操作可以在线性表的任何位置进行.线性表可以采用顺序存储结构和链式存储结构表示. 本接口的类属于da ...
- [译] Z-variant (Z变体)
阅读目录 1. Z轴上的区别 2. 问题 Unihan 的 kZVariant 字段 译自: en.wikipedia.org/wiki/Z-variant | 已发布zh.wiki 在Unicode ...
- 【Python系列】Python包管理器pip
缘起 这段时间忙着给朋友搞事,忙了好长一段时间,木有写博客很长时间了.之间做了两个东西,一个是邮件自动发送脚本,一个是数据处理软件.其中,在做数据处理软件的时候使用到了非Python系统库,是两个第三 ...
- Java Web开发中的转发和重定向的问题
Java Web的页面实现跳转有两种方式,一种是转发,另外一种是重定向.一般来说,转发比重定向快.重定向会经过客户端,转发却不会. 转发 request.getRequestDispatcher(&q ...
- python中的特殊数据类型
一.python中的特殊数据类型 对于python,一切事物都是对象,对象基于类创建.像是“wangming”,38,[11,12,22]均可以视为对象,并且是根据不同的类生成的对象. 参照:http ...
- Jquery使两个Div的滚动条同步滚动
$("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 ...
- discern concern fifth sixth
fifth---[fɪfθ] 发音的时候第2个f不发音 sixth---[sɪksθ]第2个s不发音 Feel free to contact with me if you have any conc ...
- iPhone的设备名转换
def convertDeviceName(self, deviceName): """ 转换deviceName(如iPhone 6,2)为用户习惯形式(如iPhone ...
- codeforces 17C Balance(动态规划)
codeforces 17C Balance 题意 给定一个串,字符集{'a', 'b', 'c'},操作是:选定相邻的两个字符,把其中一个变成另一个.可以做0次或者多次,问最后可以生成多少种,使得任 ...
- 对volatile不具有原子性的理解
在阅读多线程书籍的时候,对volatile的原子性产生了疑问,问题类似于这篇文章所阐述的那样.经过一番思考给出自己的理解. 我们知道对于可见性,Java提供了volatile关键字来保证可见性.有序性 ...