webapp中fixed问题解决方案
主要问题：
1，头部输入框固定后，只要再滑动内容的话，输入框会随着滑动内容而滑动。
2，在低端机：2.3以下的安卓机，你会发现怎么解决都不行的，系统浏览器是不会支持的，头部底部固定的话会滑动内容而滑动。
flex模拟fixed(推荐使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex模拟fixed</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
html,body{
height:100%;
margin:0;
padding:0;
}/**/
.wrap{height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-flex:1;display:flex;display:-webkit-flex;flex-direction:column;flex:1;-webkit-flex:1;}
.content{display:-webkit-box;-webkit-box-flex:1;flex:1;-webkit-flex:1;display:flex;display:-webkit-flex;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:5px 5px 60px 5px;} header,footer{position:fixed;z-index:1;left:0;right:0;
height:40px;
text-align:center;
width:100%;
line-height:40px;
background:#fff;
}
header{
border-bottom:1px solid #ccc;
}
footer{
border-top:1px solid #ccc;
bottom:0;
}
h1{margin:0; } </style>
</head>
<body>
<div class="wrap">
<header class="">
<h1 class=""><input type="text"/></h1>
</header> <div class="content">
<div class="">
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2><input type="text"/></h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content-last</h2>
</div> </div>
<footer class="">
<input type="text"/>
</footer>
</div> </body>
</html>
absolute模拟fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute模拟fixed</title> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
html,
body{height:100%;margin:0;padding:0;}
header,footer{height:40px; text-align:center; position:absolute; width:100%; line-height:40px; background:#fff; z-index:2;}
header{border-bottom:1px solid #ccc;top:0;}
footer{border-top:1px solid #ccc;bottom:0;}
h1{margin:0; }
.content{position:absolute;top:40px;left:0;right:0;bottom:40px; box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;}
</style>
</head>
<body> <!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<h1 class="title"><input type="text"/></h1>
</header> <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2><input type="text"/></h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content-last</h2>
</div>
<footer class="bar bar-footer">
<input type="text"/>
</footer>
</body>
</html>
目前还会存在的一些问题，页面第一次点击底部输入法是会挡住输入框的，这个情况我测试IOS8系统的时候会出现，小米1S安卓4.0系统没这个问题。
其实可以把底部高度稍微调高点就行；或是点击输入框的时候来一次刷新就不会有这个问题了。
目前我能提供的也只是这个解决方案了，也适合做头部底部fixed固定。
webapp中fixed问题解决方案的更多相关文章
- 谈一谈手机WebApp的fixed属性（手机上的固定栏）【转】
1.iphone/android原生app常见结构 似乎,所有的手机应用,都遵循这样的布局:固定的顶部+固定的底部+可滚动在中间区域.这种“雷同”的模式让人恶心,却不得不承认这是一种很规矩却又很实用的 ...
- IE6浏览器不支持固定定位（position：fixed）解决方案(转)
IE6浏览器不支持固定定位(position:fixed)解决方案 来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...
- Svelte Ui Admin后台管理系统|svelte3+svelteUI中后台前端解决方案
基于svelte3.x+svelteKit+svelte-ui网页后台管理系统SvelteAdmin. Svelte-Ui-Admin 基于svelte3.x+svelteKit+vite3+echa ...
- WebApp中的页面生命周期及路由管理
最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...
- SQL实现递归及存储过程中In()参数传递解决方案[转]
SQL实现递归及存储过程中In()参数传递解决方案 1.SQL递归 在SQL Server中,我们可以利用表表达式来实现递归算法,一般用于阻止机构的加载及相关性处理. -->实现: 假设 ...
- SQL Server 2008空间数据应用系列十一：提取MapInfo地图数据中的空间数据解决方案
原文:SQL Server 2008空间数据应用系列十一:提取MapInfo地图数据中的空间数据解决方案 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Serv ...
- python解释器的安装；python2与python3同时在环境变量中时的解决方案
新文档 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,addres ...
- tomcat中session在两个webapp中实现共享
现在遇到一个需求就是要求完成简单的单点登录,通过在一个tomcat实例中放置两个webapps应用ROOT应用和CEO应用来完成在ROOT应用登录后,在CEO可以直接使用,而未在ROOT应用登录时,不 ...
- 负载均衡集群中的session解决方案【转】
通常面临的问题 从用户端来解释,就是当一个用户第一次访问被负载均衡代理到后端服务器A并登录后,服务器A上保留了用户的登录信息:当用户再次发送请求时, 根据负载均衡策略可能被代理到后端不同的服务器,例如 ...
随机推荐
- oracle的resetlogs机制浅析(转)
文章转自:http://blog.csdn.net/wyzxg/article/details/5869543 alter database open resetlogs 这个命令我想大家都很熟悉了, ...
- scala中集合的交集、并集、差集
scala中有一些api设计的很人性化,集合的这几个操作是个代表: 交集: scala> Set(1,2,3) & Set(2,4) // &方法等同于interset方法 sc ...
- [转]virtualenv and virtualenvwrapper
转自 http://liuzhijun.iteye.com/blog/1872241 virtualenv virtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能 ...
- dubbo 学习总结
1 Dubbo 配置 dubbo配置xml配置 属性配置 注解配置 api配置 注解配置 (+) (#) 服务提供方注解: import com.alibaba.dubbo.config ...
- libjpeg 编译makfile
一.准备 首先需要下载libjpeg库,网址在这里:http://www.ijg.org/ 如果不想编译就在这下载吧:http://pan.baidu.com/s/1hqeTDre 二.编译 1. 解 ...
- Beta版本冲刺第七天 12.13
一.站立式会议照片: 二.项目燃尽图: Android端 后台 三.项目进展: 成 员 昨天完成任务 今天完成任务 问题困难 心得体会 胡泽善 用户评价的查看以及审核 用户详情的加入,并且修改了一些卡 ...
- jsf primefaces note
对应cdi,inject的变量,必须使用getter才能访问的值. @Inject DateView dateView; dateView.getFromDate1() 这样是娶不到的: dateVi ...
- 捉襟见肘之UITableViewCell重用引发的问题
我记录一下自己如何解决cell内容重叠的问题 首先,复习一下:http://blog.csdn.net/omegayy/article/details/7356823 UITableViewCell的 ...
- python运维开发之路02
年底事多,在公司忙成狗,难得把博客更新了下 本章主要内容是collections模块的介绍(队列,计数器,默认字典,有序字典,可命名元组,以及简单介绍深浅拷贝!) collections模块 coll ...
- iOS开发－二维码
二维码 从ios7开始集成了二维码的生成和读取功能 此前被广泛使用的zbarsdk目前不支持64位处理器 生成二维码的步骤: 倒入CoreImage框架 通过滤镜CIFilter生成二维码 二维码的内 ...