问题说明

移动端web的footer常常设计为fixed布局，但是在页面键盘被拉起时fixed的布局会出现问题，自己试了下，在较低版本ios和部分安卓机上会有此问题。具体问题看图示：

<body class="layout-fixed">

    <!-- 可以滚动的区域 -->

    <main>

       <input type="text" placeholder="Footer..."/>

        <button class="submit">提交</button>

    </main>

    <!-- fixed定位的底部 -->

    <footer>

    </footer>

</body>

样式：

header, footer, main {

    display: block;

}

footer {

    position: fixed;

    height: 34px;

    left:;

    right:;

    bottom:;

}

main {

    margin-bottom: 34px;

    height: 2000px;

}

蓝色的footer是fixed定位，没有唤起软键盘的时候一切正常。

唤起软键盘，在低版本ios里面就变成：（此问题在iphone4[ios7.1.2]出现，iphone6[ios9.3.1]已经修复）

这个是滑动了一部分页面的效果，footer不听话了，没有留在最底部，跑中间了。

在某些安卓里面（如锤子SM705，安卓4.4.2）看这样：

footer紧贴软键盘，遮挡后面的区域。

产生原因：

键盘被拉起之后，fixed定位失效了，会跟随页面滚动，类似absolute了。布局乱了。

解决方法：

1.使用iscroll.js解决，库已经修复了这些问题

2.问题是由于滚动区域可以滚动引起的，那么就指定main为可滚动区域，就不会影响到footer了：

改动：

<body class="layout-fixed">

    <!-- 可以滚动的区域 -->

    <main>

        <div class="content">

            <input type="text" placeholder="Footer..."/>

            <button class="submit">提交</button>

        </div>

    </main>

    <!-- fixed定位的底部 -->

    <footer>

    </footer>

</body>
footer {

    position: fixed;

    height: 34px;

    left:;

    right:;

    bottom:;

}

main {

    /* main绝对定位，进行内部滚动 */

    position: absolute;

    bottom: 34px;

    overflow-x:auto;

    overflow-y: scroll;

}

main .content {

    height: 2000px;

}

这样改了之后又有一个问题，就是滑动在手指离开触屏之后会停，如果想恢复之前的特性，还需要做些处理：

main {

    /* main绝对定位，进行内部滚动 */

    position: absolute;

    bottom: 34px;

    overflow-y: scroll;

    /* 增加该属性 */

    -webkit-overflow-scrolling: touch;

}

但在 Android2.3+ 中，因为不支持 overflow-scrolling ，因此部分浏览器内滚动会有不流畅的卡顿。

3.其实还有更直接的解决方案，就是，在focus时给另外一个视图(就是把footer隐藏掉)不显示footer,在失去焦点时再显示回来。这个虽然说简单粗暴，但最有效方便。

4.另外的解决方案就是用js动态控制footer的样式，和3的思路类似。需要加一段js,让原来的元素变成absolute,失去焦点的时候再改回去：

.fixfixed {

position:absolute;

}

$(document)

    .on('focus', 'input', function(e) {

        $this.addClass('fixfixed');

    })

    .on('blur', 'input', function(e) {

        $this.removeClass('fixfixed');

    });

也可以改成static。

5.思路类似的方法

    $(document)

        .on('focus','input',function(e){

            $('#viewport').height($(window).height()+'px');

        })

        .on('blur','input',function(e){

            $('#viewport').height('auto');

        });

还有其他的一些移动端拉起键盘相关的问题，及解决方案：

  1. 有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。
  2. 在 iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。
  3. 有些第三方浏览器底部的工具栏是浮在页面之上的，因此底部 fixed 定位会被工具栏遮挡。解决办法也比较简单粗暴——适配不同的浏览器，调整 fixed 元素距离底部的距离。
  4. 最好将 header 和 footer 元素的 touchmove 事件禁止，以防止滚动在上面触发了部分浏览器全屏模式切换，而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。
  5. 在页面滚动到上下边缘的时候，如果继续拖拽会将整个 View 一起拖拽走，导致页面的“露底”。

参考：http://efe.baidu.com/blog/mobile-fixed-layout/

移动端网页fixed布局问题解决方案的更多相关文章

  1. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  2. 虚拟键盘冲击移动端fixed布局的解决方案

    在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug ...

  3. Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  4. [转] Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  5. 八、Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  6. 移动端设置fixed布局的问题解决

    最近写移动端,遇到一个问题就是用fixed属性布局的时候由于手机的原因会出现很多问题,比如说手机端底部固定一块,然后里面有输入框,(类似于手机QQ或者微信底部的输入框一样的布局)这个时候在调用软键盘的 ...

  7. 移动端— position: fixed;固定定位解决方案

    这里有个关键的东西叫做viewport,你经常在页面的头部里可以见到它: <meta name="viewport" content="width=device-w ...

  8. 个人收藏的移动端网页布局rem解决方案

    写移动端项目时,总是会纠结是用css3 media query 还是用rem.移动端框架挺多,但是因为项目都比较小,不考虑使用. 无意在网上找到一个移动端rem布局的解决方案,经个人实践,目前未出现什 ...

  9. web移动端input获得光标Fixed定位失效解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...

随机推荐

  1. 匈牙利算法 DFS模板（了解度+1）

    //算法核心是求最大匹配数 #include<bits/stdc++.h> #include<iostream> #include<cstdio> #include ...

  2. 一些好的python IDE

    pyscipter 是一个不错的选择,快速灵巧.功能丰富.它的安装包只有五六兆,功能却一个都不少.语法高亮功能也很强,运算符.数字.hex都能按照你的需要改变颜色.还有非常灵敏的code comple ...

  3. SSL安全证书-概念解析

    一.关于证书 数字证书是一种认证机制.简单点说,它代表了一种由权威机构颁发授权的安全标志. 由来 在以前,传统网站采用HTTP协议进行数据传输,所有的数据几乎都用的明文,很容易发生隐私泄露.为了解决安 ...

  4. 压力测试报出503错误---ASP.NET支持大并发的相关配置

    项目反馈报出503错误,需要收集性能数据如下: 1.Windows性能监视器,该应用程序池进程的线程和处理队列 2.问题重现时的进程dump 这是请求到达IIS后遇到的第一个队列,HTTP.sys收到 ...

  5. Django Form and Modelform Admin定义 高级查询）

    Django的form表单一般具有两种功能 1. 验证输入 2.输入HTML ---------模板----------- from django import forms class BookFor ...

  6. rails: 的cookie小结

    cookie会随着浏览器每次发起的请求(request)传给服务器进行读取,而服务器则会在应答(response)中携带cookie写在本机上.因此,cookie是存储在本地的.而且由于cookie的 ...

  7. IIS7下使用4.0框架集成模式URLRewriter重写中文URL乱码问题

    解决方法: 1 url中中文先通过Server.UrlEncode编码 2 修改网站编码 3.更改URLRewriter.net中源码 找到RewriterEngine类中 private strin ...

  8. Mybatis原理分析之二：框架整体设计

    1.引言 本文主要讲解Mybatis的整体程序设计,理清楚框架的主要脉络.后面文章我们再详细讲解各个组件. 2.整体设计 2.1 总体流程 (1)加载配置并初始化       触发条件:加载配置文件 ...

  9. System.Data.EntityState”在未被引用的程序集中定义

    类型“System.Data.EntityState”在未被引用的程序集中定义.必须添加对程序集“System.Data.Entity, Version=4.0.0.0, Culture=neu 错误 ...

  10. Spark Netty与Jetty （源码阅读十一）

    spark呢,对Netty API又做了一层封装,那么Netty是什么呢~是个鬼.它基于NIO的服务端客户端框架,具体不再说了,下面开始. 创建了一个线程工厂,生成的线程都给定一个前缀名. 像一般的n ...