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 ...
随机推荐
- Week2《Java程序设计》第二周学习总结
Week02-Java学习笔记2 1. 本周学习总结 本周学习了java的基本语法与类库,其中介绍了基本数据类型和引用类型,介绍了String类,String对象的拼接以及String的一些常用方法: ...
- redux源码阅读之compose,applyMiddleware
我的观点是,看别人的源码,不追求一定要能原样造轮子,单纯就是学习知识,对于程序员的提高就足够了.在阅读redux的compose源码之前,我们先学一些前置的知识. redux源码阅读之compose, ...
- 【PL/SQL编程】SQL与PL/SQL的区别
SQL概念: SQL是结构化查询语言,由数据定义语言.数据操纵语言.数据控制语言构成,它不面向过程,即前一条语句与后一条语句无关.它没有流程控制,也不存在变量. PL SQL概念: PL/SQL ...
- better1【模式】Module模式
var myModule = (function($, _) { var privateVariable = "Hello World" var pulicProperty = & ...
- 深入理解java虚拟机-第七章
第7章 虚拟机类加载机制 类的加载的时机 加载 Loading, 连接 Linking(验证 Verfiication, 准备Preparation, 解析 Resolution) 初始化 Initi ...
- 由于出现操作系统错误 3，进程无法读取文件D:\XXXX\X.pre (源: MSSQL_REPL，错误号: MSSQL_REPL20024)
最近着手做SqlServer2008的订阅发布,起初使用推送订阅很顺利,后来改成请求订阅出现了以下问题,折腾好长时间终于搞定,留下此文备日后查阅,或供遇相同问题的道友参考: 首先阐述以下问题: 1. ...
- Shell编程(二)——shell的基础知识及常用命令
shell的基础知识 一.bash有以下特点: 1.记录命令历史 2.指令和文件名补全 3.别名 alias rm='rm -i' 4.通配符 * 0个或多个字符 ?匹配一个字符 5 输入输出重定向 ...
- fn project 打包Function
Option 1 (recommended): Use the fn cli tool We recommend using the fn cli tool which will handle a ...
- Markdown编辑器推荐与语法教程--图片版
请参考Markdown编辑器推荐与语法教程--展示版或者Markdown编辑器推荐与语法教程--展示版看具体效果,当然,大家也可以下载Mou亲自体验一把 End
- 为什么 I2C（IIC）需要上拉电阻
源鑫问: I2C时钟线和数据线为什么要接上拉电阻? 因为 I2C 的 IO 是开漏的,所以需要上拉电阻. 延伸: 之前 hippo曾经说过有人将 IO 设置为 PP,可能会烧 IO. 之前以为 I2C ...