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 ...
随机推荐
- H264的nalu type有哪些？
1.forbidden_bit: 禁止位,初始为0,当网络发现NAL单元有比特错误时可设置该比特为1,以便接收方纠错或丢掉该单元. 2.nal_ ...
- 用 WEKA 进行数据挖掘——第二章: 回归
回归 回归是最为简单易用的一种技术,但可能也是最不强大(这二者总是相伴而来,很有趣吧).此模型可以简单到只有一个输入变量和一个输出变量(在 Excel 中称为 Scatter 图形,或 OpenOff ...
- java如何填写简历？（干货篇）
化身孤岛的鲸不才 - 十三夜之月 一份优秀的简历不一定能帮你找到一份满意的工作,但能大大提升你的面试机会. 不容否认,简历是对你的能力.教育和经历的一份简要信息概述. 简历中应该突出你最核心的 ...
- ArcGIS图例标注上标和下标
1. 插入图例 在布局视图下,从插入中选择"图例",我们获得以下的样式: 2. 转为单个图形 选择图例,点击右键,选择"转化为图形",再次点击右键,点击&quo ...
- C++ 资源管理 —— RAII
RAII:在构造函数中申请资源,在析构函数中释放资源. 1. RAII 自动实现锁资源的释放 void bad() { m.lock(); f(); if (COND) return; m.unloc ...
- [转载] 视音频数据处理入门：RGB、YUV像素数据处理
===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理 视音频数据处理 ...
- c++11新特性之宽窄字符转换
C++11增加了unicode字面量的支持,可以通过L来定义宽字符:str::wstring str = L"中国人": 将宽字符转换为窄字符串需要用到codecvt库中的std: ...
- vector释放内存之swap方法
相信大家看到swap这个词都一定不会感到陌生,就是简单的元素交换.但swap在C++ STL中散发着无穷的魅力.下面将详细的说明泛型算法swap和容器中的swap成员函数的使用! 1. 泛型算法swa ...
- Sublimetext3的下载与安装
https://www.sublimetext.com/ Sublimetext价格不菲,但是作者允许无限期的免费试用,请不要下载破解版 使用国内汉化版的很有可能感染病毒,请善待电脑 百度搜索找到官网 ...
- Android进程间的通信
1.概述:由于android系统中应用程序之间不能共享内存.因此,在不同应用程序之间交互数据(跨进程通讯)就稍微麻烦一些.在android SDK中提供了4种用于跨进程通讯的方式.这4种方式正好对应于 ...