web页面在ios下不支持fixed可用absolute替代的方案
本文引用出处：http://www.cnblogs.com/PeunZhang/p/3553020.html。
对于 ios4 和 android2.2 以下不支持 position:fixed 的问题，有2种布局方法可以替代。
布局一： 定义页面整体高度为100%，然后使用 position:absolute 布局可解决
/*
<!--absolute布局 [[ -->
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
<!--absolute布局 ]] -->
*/
html,body{height:100%;}
.wrap{width:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.header{position: absolute;top:0;left:0;width:100%;}
.footer{position: absolute;bottom:0;left:0;width:100%;}
.main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:100%;} 布局二： 定义页面整体高度为100%，然后使用 display:flex 布局可解决
/*
<!-- flex布局 [[ -->
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
<!-- flex布局 ]] -->
*/
html,body{height:100%;}
.wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.main{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;}
position:fixed参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
web页面在ios下不支持fixed可用absolute替代的方案的更多相关文章
- 解决IOS下不支持fixed的问题
我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focu ...
- ios下,对于position:fixed支持不完美的额解决方案
ios下,当有文本框时,会调用输入法,而这个时候,定位(fixed)在底部的东西,就会被弹上例,离底部有段距离,这算是个坑了. 我的解决方案是这样的. 除了定位在底部的元素外,用一个大div把其他元素 ...
- 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题
IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...
- web前端 在 iOS下 input不能输入 以及获取焦点之后会出现蓝色的border轮廓
iOS下 input 不能获取焦点 获取焦点后:设置border:none无效果 .hb_content input{ display: inline-block; margin-left: 0.22 ...
- web页面调用IOS的事件
/** * js 调用ios的方法 * @param callback */ function connectWebViewJavascriptBridge(callback) { if (windo ...
- H5页面在IOS下不会自动播放音乐的坑
document.addEventListener(‘DOMContentLoaded‘, function () { function audioAutoPlay() { var audio = d ...
- iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...
- ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- QQ音乐Android客户端Web页面通用性能优化实践
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...
随机推荐
- aac adts & LATM封装码流分析
本文继续上一篇文章的内容,介绍一个音频码流处理程序.音频码流在视频播放器中的位置如下所示. 本文中的程序是一个AAC码流解析程序.该程序可以从AAC码流中分析得到它的基本单元ADTS frame,并且 ...
- 使用 DocFX 生成 .Net/Unity项目文档
孙广东 2017.5.27 http://blog.csdn.NET/u010019717 微软开源全新的文档生成工具DocFX 类似JSDoc或Sphinx 如何使用看 : http: ...
- c++ 基础知识 0001 const 知识1
1. C++ const用法 尽可能使用const 2. C++ const 允许指定一个语义约束,编译器会强制实施这个约束,允许程序员告诉编译器某值是保持不变的.如果在编程中确实有某个值保持不变,就 ...
- 使用 event.preventDefault 拦截表单的提交
event.preventDefault() 方法 W3C 官方的定义是:取消事件的默认动作,不单单可以拦截表单的提交,<a>标签的跳转, <input>标签的输入等等默认动作 ...
- HDU - 6096 ：String （AC自动机，已知前后缀，匹配单词，弱数据）
Bob has a dictionary with N words in it. Now there is a list of words in which the middle part of th ...
- I/O多路复用方案
1. 本节思维导图 2. 基本的网络编程接口 2.1 基于TCP的通信模型 2.2 基于UDP的通信模型 3. 非阻塞的服务器程序 file.pipe.fifo.socket在默认创建过程中都是阻塞的 ...
- angular中的 input select 值绑定无效，以及多出一个空白选项问题
问题: <!-- 问题标签 --> <select ng-model="sortType"> <option value="1"& ...
- 浅谈CSRF跨站点请求
CSRF是什么? (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一,也被称为“One C ...
- git常用命令小结
1.ssh连接方式 公钥生成ssh-keygen -t rsa -C "764432054@qq.com"在用户家目录下的.ssh目录下生成 id_rsa ,id_rsa.pub ...
- java代码Calendar类
总结:时间类Calendar.类代表当前时 Calendar c=Calendar.getInstance();,,Calendar是抽象类.Calendar的构造方法是私有的,API提供了getIn ...