<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. 奥利奥好吃吗？Android 8.0新特性适配测试报告来啦！

    WeTest 导读 谷歌2017 I/O开发者大会上发布了Android 8.0的正式版, 其官方代号为Oreo(奥利奥).网上关于Android8.0新功能特性的介绍已铺天盖地,新功能特性会对程序应 ...

  2. win10 uwp 装机必备应用 含源代码

    zhxilin大神说http://www.cnblogs.com/zhxilin/p/4819372.html这文章说到了使用await Windows.System.Launcher.LaunchU ...

  3. Fatal error in launcher：Unable to create process using '"'

    Windows下同时存在Python2和Python3使用pip时系统报错:Fatal error in launcher: Unable to create process using '" ...

  4. IDEA启动后页面没有tomcat server选项，显示灰色问号和红叉不能使用

    说明:自己好几次硬盘莫名其妙读不出来导致电脑重启后idea没有了tomcat选项,原来的tomcat上显示灰色的问号和红色小叉子,网上搜了好久加上自己摸索,终于解决了.现在记一下也分享一下,省的下回又 ...

  5. 基于FFMpeg的C#录屏全攻略

    最近负责一个录屏的小项目,需要录制Windows窗口内容并压缩保存到指定文件夹,本想使用已有的录屏软件,但是本着学习的态度去探索了FFMpeg,本文主要介绍基于FFMpeg开源项目的C#录屏软件开发. ...

  6. 关于keyTyped

    蠢了,重写keyTyped方法时候拿keyCode去做比较....记一下....VK_UNDEFiEND.......

  7. QQ顶部的消息，联系人切换

    高仿ios SegmentView 以前做过的一个项目美工设计的页面包含这个控件,和QQ消息页面顶部的效果一样,其实,这个控件是ios7的分段控制,android没有这个控件,不过实现起来也比较简单, ...

  8. 读书笔记-你不知道的JS上-词法作用域

    JS引擎 编译与执行 Javascript引擎会在词法分析和代码生成阶段对运行性能进行优化,包含对冗余元素进行优化(例如对语句在不影响结果的情况下进行重新组合). 对于Javascript来说,大部分 ...

  9. HDU 5182

    #include <iostream> #include <algorithm> #include <cstring> using namespace std; / ...

  10. code forces 436 C. Bus

    C. Bus time limit per test 2 seconds memory limit per test 256 megabytes input standard input output ...