<body class="layout-fixed">

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

    <header>

    </header>

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

    <main>

        <!-- 内容在这里... -->

    </main>

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

    <footer>

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

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

    </footer>

</body>v
header, footer, main {

    display: block;

}

header {

    position: fixed;

    height: 50px;

    left:;

    right:;

    top:;

}

footer {

    position: fixed;

    height: 34px;

    left:;

    right:;

    bottom:;

}

main {

    margin-top: 50px;

    margin-bottom: 34px;

    height: 2000px

}

下面这个样子。

键盘唤起下面这样

是为什么呢？：  软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可理解为成了 absolute 定位）

解决方案: 将原 body 滚动的区域域移到 main 内部

header, footer, main {

    display: block;

}

header {

    position: fixed;

    height: 50px;

    left:;

    right:;

    top:;

}

footer {

    position: fixed;

    height: 34px;

    left:;

    right:;

    bottom:;

}

main {

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

    position: absolute;

    top: 50px;

    bottom: 34px;

    /* 使之可以滚动 */

    overflow-y: scroll;
　　/* 增加该属性，可以增加弹性 */
　　-webkit-overflow-scrolling: touch;

}

main .content {

    height: 2000px;
}

h5底部输入框被键盘遮挡问题

var oHeight = $(document).height(); //浏览器当前的高度

   $(window).resize(function(){

        if($(document).height() < oHeight){

        $("#footer").css("position","static");

    }else{

        $("#footer").css("position","absolute");

    }

   });

js解决软键盘遮挡输入框问题

链接 http://blog.csdn.net/u011500781/article/details/53926425

移动端页面input输入框被键盘遮挡问题的更多相关文章

  1. 苹果微信input输入框被键盘遮挡

    最近一个项目,input输入框需要在页面的最下面(position:fixed),这样,当键盘获取焦点的时候, 苹果自带键盘不会挡住输入框,但是搜狗输入法的键盘就会挡住.可以用以下方法解决: docu ...

  2. H5页面input输入框含有键盘自带的表情符时显示异常

    在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...

  3. 移动端，input输入框被手机输入法解决方案

    当界面元素靠下时候的时候,input输入框会被系统的键盘遮挡. 我们可以让界面向上移动一定距离去避免遮挡. $('#money').click(function(){ setTimeout(funct ...

  4. h5开发安卓机型点击输入框调起输入法，输入框被键盘遮挡的解决方法

    前言: 从以前的项目中找一个问题的解决方案,顺带找到了这个安卓机型调起输入法,页面没有自动上滑导致输入框被弹起的键盘遮挡的解决方案.这个问题只有安卓机型页面中的输入框处于底部(也就是底部键盘区域)的时 ...

  5. AngularJS移动端页面input无法输入

    用angularJS写手机页面,有时候会发现input输入框点击了却不能输入,或者长按才能输入,可能是因为input绑定了ng-click导致,可去掉ng-click,将ng-click绑定的方法改用 ...

  6. iOS解决表格中TextField,TextView编辑时，输入框被键盘遮挡的问题

    方法1:在原来的 UIViewController 内部再添加一层 UITableViewController 代码如下 : // // ViewController.m // 键盘遮挡问题 // / ...

  7. 移动端解决input focus后键盘弹出，高度被挤压的问题

    //解决弹出键盘页面高度变化bug var viewHeight = window.innerHeight; //获取可视区域高度 $("input").focus(functio ...

  8. 去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影

    input, textarea, button, a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

  9. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

随机推荐

  1. Spring装配bean

    Spring配置的可选方案 Spring提供了如下三种装配机制: (1)在XML中显式配置 (2)在Java中显式配置 (3)隐式的bean发现机制和自动装配 Spring有多种方式可以装配bean, ...

  2. ~.NET下国际化i18n简单示例

    因业务需要,后台站点需要出一个国际化的解决方案,偷懒后用微软自带资源文件暂时解决.废话不多说,进入正题. 第一步:在项目菜单下选择添加国际化资源文件夹. 第二部:添加完毕之后,添加各语言版本下的资源信 ...

  3. Python学习笔记（五）--Python数据类型-数字及字符串

    Python数据类型:123和'123'一样吗?>>> 123=='123'False>>> type(123)<type 'int'>>> ...

  4. 网络地址转换NAT

    1. 网络地址转换:用于专用网内部的主机和因特网上的主机通信.在专用网连接到因特网 的路由器上需要安装NAT软件,装有NAT软件的路由器叫做NAT路由器,它至少要有 一个有效的全球IP地址.所有使用本 ...

  5. js 两个日期比较相差多少天

    var day1 = new Date("2017-9-17"); var day2 = new Date("2017-10-18"); console.log ...

  6. Java基础笔记2

    1.   变量的定义 int money; int 变量类型   money 变量名 money=1000;变量的值 2.  自动类型转换 ①类型要兼容  容器 (水杯---竹篮---碗) ②目标类型 ...

  7. Vue源码后记-其余内置指令（3）

    其实吧,写这些后记我才真正了解到vue源码的精髓,之前的跑源码跟闹着玩一样. go! 之前将AST转换成了render函数,跳出来后,由于仍是字符串,所以调用了makeFunction将其转换成了真正 ...

  8. Element ui表格展示图片问题

    当需要遍历图片时,不能直接使用prop绑定值,具体 代码如下 <el-table-column label="头像" width="100"> &l ...

  9. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  10. java语言插入数组中一个数，仍然能够实现排序

    package com.llh.demo; import java.util.Scanner; /** * * @author llh * */ public class Demo16 { /* * ...