主要问题：

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问题解决方案的更多相关文章

  1. 谈一谈手机WebApp的fixed属性（手机上的固定栏）【转】

    1.iphone/android原生app常见结构 似乎,所有的手机应用,都遵循这样的布局:固定的顶部+固定的底部+可滚动在中间区域.这种“雷同”的模式让人恶心,却不得不承认这是一种很规矩却又很实用的 ...

  2. IE6浏览器不支持固定定位（position：fixed）解决方案(转)

    IE6浏览器不支持固定定位(position:fixed)解决方案   来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...

  3. Svelte Ui Admin后台管理系统|svelte3+svelteUI中后台前端解决方案

    基于svelte3.x+svelteKit+svelte-ui网页后台管理系统SvelteAdmin. Svelte-Ui-Admin 基于svelte3.x+svelteKit+vite3+echa ...

  4. WebApp中的页面生命周期及路由管理

    最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...

  5. SQL实现递归及存储过程中In()参数传递解决方案[转]

    SQL实现递归及存储过程中In()参数传递解决方案   1.SQL递归 在SQL Server中,我们可以利用表表达式来实现递归算法,一般用于阻止机构的加载及相关性处理.   -->实现: 假设 ...

  6. SQL Server 2008空间数据应用系列十一：提取MapInfo地图数据中的空间数据解决方案

    原文:SQL Server 2008空间数据应用系列十一:提取MapInfo地图数据中的空间数据解决方案 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Serv ...

  7. python解释器的安装；python2与python3同时在环境变量中时的解决方案

    新文档 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,addres ...

  8. tomcat中session在两个webapp中实现共享

    现在遇到一个需求就是要求完成简单的单点登录,通过在一个tomcat实例中放置两个webapps应用ROOT应用和CEO应用来完成在ROOT应用登录后,在CEO可以直接使用,而未在ROOT应用登录时,不 ...

  9. 负载均衡集群中的session解决方案【转】

    通常面临的问题 从用户端来解释,就是当一个用户第一次访问被负载均衡代理到后端服务器A并登录后,服务器A上保留了用户的登录信息:当用户再次发送请求时, 根据负载均衡策略可能被代理到后端不同的服务器,例如 ...

随机推荐

  1. 【poj3141】 Distant Galaxy

    http://poj.org/problem?id=3141 (题目链接) 题意 给出平面上n个点,找出一个矩形,使边界上包含尽量多的点. solution 不难发现,除非所有输入点都在同一行或同一列 ...

  2. 使用enum建立简单的状态机

    Overview The enum in Java is more powerful than many other languages which can lead to surprising us ...

  3. SQL数据操作和查询

    1.Oracle中可以把查询的结果根据结果集中的表结构和数据形成一张新表. CREATE TABLE 表名 AS SELECT语句,例如: CREATE TABLE INFOS1 AS SELECT  ...

  4. NOIp 0924 水题记

    这场貌似是gcd专场? 第一题很有意思,模拟gcd的过程即可. //0924 candy //by Cydiater //2016.9.24 #include <iostream> #in ...

  5. POJ2528Mayor's posters（离散化 + 线段树）

    题目链接: 题意:给定一些高度都相同的海报去贴,问最后能看见几张海报 The picture below illustrates the case of the sample input. { 8,9 ...

  6. python 培训之 装饰器

    1. 高阶函数 接收 函数作为参数,返回函数. 2. 函数闭包 3. 接收一个函数为参数,对其进行包装,然后返回一个包装函数(tip:包装函数中调用并返回参数函数. #! /usr/env/pytho ...

  7. python 培训之Django

      1.Install  sudo apt-get install python-pip sudo pip install django==1.8  2. Create Project django- ...

  8. JS-DOM对象知识点汇总（慕课）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>D ...

  9. NSXMLParser解析本地.xml数据（由于like7xiaoben写的太好了，我从她那里粘贴过来的）

    NSXMLParser解析简要说明 .是sax方法解析 .需要创建NSXMLParser实例 (alloc) 并创建解析器 (initWithData:) 为解析器定义委托 (setDelegate: ...

  10. 转：遗传算法解决TSP问题

    1.编码 这篇文章中遗传算法对TSP问题的解空间编码是十进制编码.如果有十个城市,编码可以如下: 0 1 2 3 4 5 6 7 8 9 这条编码代表着一条路径,先经过0,再经过1,依次下去. 2.选 ...