webapp中fixed问题解决方案

时间：2022-09-12 12:12:14

主要问题：

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）解决方案&lpar;转&rpar;

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

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

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

  4. SQL实现递归及存储过程中In&lpar;&rpar;参数传递解决方案&lbrack;转&rsqb;

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

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

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

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

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

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

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

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

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

  9. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

随机推荐

  1. mono 3&period;10&period;0 正式发布：性能进一步改进

    Mono是Xamarin资助的一个项目,是微软的.NET框架的开源实现.它使得使用C#.F#和其他.NET语言进行跨平台开发成为可能.Xamarin在Mono之上构建了跨平台开发工具以及像Xamari ...

  2. php的&lt&semi;&quest;php &quest;&gt&semi;标签匹配

    在公司实习了没有多久就开始和同事发现了一个问题,就是之前的人写过的项目经常莫名其妙的出错,仔细的看项目的源代码的时候发现项目中并没有逻辑上的错误,而且各种关系以及数据都没有问题,这是为什么呢.再次认真 ...

  3. javascript作用域和作用域链摘录

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...

  4. Java for LeetCode 045 Jump Game II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  5. IE8 innerHTML赋值时包含多级HTML标签时的解决方案

    var inhtml = ''; var font = document.createElement("font"); var a = document.createElement ...

  6. 通过新的 Azure 媒体服务资源管理器工具管理媒体工作流

    Xavier Pouyat    Azure 媒体服务高级项目经理 几个月前,一家广播公司找到了我,希望我向他们提供一种图形界面工具,好让他们使用 Azure媒体服务来上传.管理资产并对资产进行编 ...

  7. 使用XML布局文件和Java代码混合控制UI界面

    完全使用Java代码来控制UI界面不仅烦琐.而且不利于解耦:而完全利用XML布局文件来控制UI界面虽然方便.便捷,但难免有失灵活.因此有些时候,可能需要混合使用XML布局文件和代码来控制UI界面. 当 ...

  8. monaco editor &plus; vue的配置

    monaco editor是vscode的御用编辑器. 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性. 夸了这么多,这里只说它一个问题: 这货 ...

  9. Android为TV端助力 fragment 的用法以及与activity的交互和保存数据的方法，包括屏幕切换&lpar;转载&rpar;！

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 1.管理Fragment回退栈 类似与Android系统为Acti ...

  10. css属性image-redering详解

    What? image-rendering作为现阶段还处于实验性质中的css属性,他的作用是在浏览器对图片进行比例缩放时,设置其缩放使用的算法,从而来得到我们最终想要的图片结果.而且这个属性可以应用于 ...

相关文章