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 ...
随机推荐
- 【python】windows下安装xgboost的python库
傻瓜教程 主要参考了https://www.hongweipeng.com/index.php/archives/826/ 和 https://github.com/dmlc/xgboost/iss ...
- js类 的小例子
class Flyer { constructor(fname, speed) { this.fname = fname; this.speed = speed; } fly(){ console.l ...
- string manipulation in game development-C # in Unity -
◇ string manipulation in game development-C # in Unity - It is about the various string ● defined as ...
- HihoCoder 1067 最近公共祖先（ST离线算法）
最近公共祖先·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上上回说到,小Hi和小Ho用非常拙劣——或者说粗糙的手段山寨出了一个神奇的网站,这个网站可以计算出某两个 ...
- 转载论文关于fir滤波器的fpga实现
摘 要 本文讨论的FIR滤波器因其具有严格的线性相位特性而得到广泛的应用.在工程实践中,往往要求信号处理具有实时性和灵活性,本论文研究FIR的FPGA解决方案正体现了电子系统的微型化和单片化. 本论文 ...
- 为加载......符号 vs2012调试缓慢解决方案
调试C#网站时vs2012一直 为xxx加载符号 本机上的2010 2017 没有此毛病 没一步都要等待好几秒,百度狗狗(大概花了半天时间)后的方法无果 最后在vs官方论坛 好多老外说删除全部断点就行 ...
- CentOS 7 : Docker私有仓库搭建和使用
系统环境: CentOS 7.2 192.168.0.179:docker仓库 192.168.0.60:客户端 安装并启动docker yum -y install docker systemctl ...
- poj 3590 The shuffle Problem——DP+置换
题目:http://poj.org/problem?id=3590 bzoj 1025 的弱化版.大概一样的 dp . 输出方案的时候小的环靠前.不用担心 dp 时用 > 还是 >= 来转 ...
- 蓝桥杯 算法训练 ALGO-60 矩阵乘法
算法训练 矩阵乘方 时间限制:1.0s 内存限制:512.0MB 问题描述 给定一个矩阵A,一个非负整数b和一个正整数m,求A的b次方除m的余数. 其中一个nxn的矩阵除m的余数得到的仍是一个 ...
- java代码实现鼠标双击出现画图-----------paint()方法由系统自动调用，且一定是小写的字母p
总结:在运行过程中,自己不是很认真,没有检查自己写的代码,结果是无论你怎么运行,双击 frame都没用,因为系统根本就没有调用paint()方法绘图.所以很重要的是实现这个方法 package com ...