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 ...
随机推荐
- win+D可以最小化所有窗口，显示桌面 win+E可以快速打开我的电脑 这两个对我来说非常常用,要用熟练,节约时间
win+D可以最小化所有窗口,显示桌面 win+E可以快速打开我的电脑
- AS3中以post和get方式提交数据
这里主要介绍在as3中用URLRequest对像来post或get数据到服务器. post用于大数据量的提交,get用于小数据量的提交. as3中提交数据: POST方式: 1.新建一个test.fl ...
- cocos2dx lua 热加载实现
[Q]原创 2015-08-30 在公司使用cocos2dx+lua 开发游戏有一段时间了,刚好lua的热更新交给我负责.以前热更新的lua脚本大部分都是在下载之后加载.最近策划又有新需求,需要在游戏 ...
- DRF 的 版本，解析器，与序列化
DRF 的 版本,解析器,与序列化 补充 配置文件中的 类的调用: (字符串) v1 = ["view.xx.apth.Role","view.xx.apth.Role& ...
- 【SQL查询】连接多表_join
1. inner join 返回两表相匹配的数据,做表中的“1, 2” 和右表中的“5, 6”都不会显示. 2. left join 以左表为主,左表返回所 ...
- SQL-left(right,inner) join
left join(左联接) :返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) :返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) ...
- ng 双向数据绑定 实现 注册协议效果
效果: 代码: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> ...
- LINUX命令—让人喜爱的find
FIND命令的让人喜爱的地方在于其后面跟着的 –exec 可以执行其他linux命令 这点太让人高兴了,不过他的结尾要带一个特殊的结构 {} \: 说说实例:
- Apache的Mod_rewrite学习 (RewriteCond重写规则的条件) 转
RewriteCondSyntax: RewriteCond TestString CondPattern [flags] RewriteCond指令定义一条规则条件.在一条RewriteRule指令 ...
- LinuxCentos6安装中文输入法
第一步.先安装中文语言包: 执行以下命令 [root@bogon 桌面]# yum install fonts-chinese.noarch [root@bogon 桌面]# yum install ...