<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. win10 uwp 兴趣线

    本文讲的是如何去做一个时间轴样子的东西但我们放的不一定是时间,可能是我们的时间.我把它放在我的CSDN阅读,我的界面做出来很差,但是应该读者能做出很漂亮的. 行间距 我们在ViewModel写一个Ob ...

  2. socket__服务端、客户端（注释版）

    # !/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/8/22 16:14 # @Author : Mr_zhang # @Sit ...

  3. Java中数组的遍历

    (I)标准for循环遍历数组 例如代码片段: int [] nums = new int [] {0,1,2,3,4,5,6,7,8,9}; for(int i=0;i<11;i++){ Sys ...

  4. Java IO(IO流)-2

    IO流 第一部分 (OutputStreamWriter BufferOutputStream) 转换流 超类为Reader和Writer 是字符流通向字节流的桥梁:可使用指定的字符编码表,将要写入流 ...

  5. 原生javascript跨浏览器常用事件处理

    var eventUntil = {             getEvent: function (event) {//获取事件                 return event ? eve ...

  6. Tracker-store

    升级后发现有个tracker-store占用cpu非常厉害,查了下,好像是GNOME 3使用 Documents 來整合 本机 以及 在线(Google / Twitter)账户的文件,这个功能会呼叫 ...

  7. MAVEN 打包WAR

    <build> <finalName>edu-web-boss</finalName> <resources> <resource> < ...

  8. django中使用sha1,md5加密

    # salt 盐 使用sha1加密算法,返回str加密后的字符串 # 提高字符串的复杂的 from hashlib import sha1 def get_hash(str, salt=None): ...

  9. 实现响应式——Bootstrap的删格系统详解

    Bootstrap 今天和大家一起学习如今很流行的前端框架之一,Bootstrap框架. 前言 今天带大家看看Bootstrap框架,其实我呢主要还是用里面的删格系统,单单这个删格系统就比较强大了.其 ...

  10. 浅析Java源码之ArrayList

    面试题经常会问到LinkedList与ArrayList的区别,与其背网上的废话,不如直接撸源码! 文章源码来源于JRE1.8,java.util.ArrayList 既然是浅析,就主要针对该数据结构 ...