<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. 【学习】js学习笔记：对象的一些基础知识

    1.创建对象 //构造函数方法 function fun1(){} var obj=new fun1(); //Object方法,O要大写 var obj1=new Object(); //json方 ...

  2. Hadoop（九）Hadoop IO之Compression和Codecs

    前言 前面一篇介绍了Java怎么去查看数据块的相关信息和怎么去查看文件系统.我们只要知道怎么去查看就行了!接下来我分享的是Hadoop的I/O操作. 在Hadoop中为什么要去使用压缩(Compres ...

  3. Sql语句备份Sqlserver数据库

    BACKUP DATABASE [POS_YiZhuang]TODISK = N'C:\数据库\POS_YiZhuang2016-09-20-3.bak'WITHNAME = N'POS_YiZhua ...

  4. 【转】NOR Flash擦写和原理分析

    1. NOR FLASH 的简单介绍 NOR FLASH 是很常见的一种存储芯片,数据掉电不会丢失.NOR FLASH支持Execute On Chip,即程序可以直接在FLASH片内执行(这意味着存 ...

  5. setjmp和longjmp用法

    本文转自:http://blog.csdn.net/wuhong40/article/details/6155838,感谢原文作者. 前不久在阅读Quake3源代码的时候,看到一个陌生的函数:setj ...

  6. Nginx-OpenResty安装配置

    上两篇中介绍了: Ngnix技术研究系列1-通过应用场景看Nginx的反向代理 Ngnix技术研究系列2-基于Redis实现动态路由 发现,应该加一篇OpenResty的安装部署说明,方便大家按图索骥 ...

  7. Linux系统挂载操作mount详解

    在Linux系统中,文件系统不挂载是无法使用的.挂载,即是让文件系统在操作系统中可用.在Linux中使用mount命令来挂载文件系统,有永久性挂载和临时性挂载两种挂载方式. 1. 永久性挂载: 修改配 ...

  8. LeetCode 346. Moving Average from Data Stream （数据流动中的移动平均值）$

    Given a stream of integers and a window size, calculate the moving average of all integers in the sl ...

  9. 正则表达式&常用JS校验

    符号 含义 ^ 以什么开头 $ 以什么结束 * 任意个(包括0个) + 至少一个 ? 没有或一个 {a,b} a-b个 {a} 正好a个 {a,} 至少a个 | 或 . 任意字符 [] 方括号内的任意 ...

  10. PyQt5安装目录中找不到designer.exe与pyrcc5.exe

    我安装的是PyQt5的5.9版本,在安装目录下找不到designer.exe文件.在摸索一段后发现5.9版本对库文件和相关的开发工具是分开发布的.QtDesigner是在pyqt5-tools的包里. ...