提交

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输入框被键盘遮挡

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

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

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

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

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

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

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

AngularJS移动端页面input无法输入

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

iOS解决表格中TextField&comma;TextView编辑时，输入框被键盘遮挡的问题

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

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

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

去掉移动端页面 input&comma; textarea&comma; button&comma; a 标签获取焦点时显示的黑影

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

控制input输入框光标的位置

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

随机推荐

一行R代码来实现繁琐的可视化

ggfortify 有着简单易用的统一的界面来用一行代码来对许多受欢迎的R软件包结果进行二维可视化的一个R工具包.这让许多的统计学家以及数据科学家省去了许多繁琐和重复的过程,不用对结果进行任何处理就能 ...

Oracle 10g安装64位图解流程

1. 安装准备阶段 1.1 安装Oracle环境 本例使用X-Manager来实现与Linux系统的连接,本例使用的所有命令和操作都是在X-Manager下进行.X-Manager安装完成后的配置方法 ...

MATLAB简单实现ID3

再看,简单总结下今天看到的经典的决策树算法——ID3. ID3:在决策树的各级节点上,使用信息增益的方法作为属性的选择标准,来帮助确定生成每个节点时所应采 ...

【原】Spring与MongoDB集成：配置

MongoDB的API提供了DBObject接口来实现BSONObject的操作方法,BasicDBObject是具体实现.但是并没有提供DBObject与BeanObject的转换.在还没有了解到与 ...

基于node&sol;mongo的App Docker化测试环境搭建

搭建步骤: 1.宿主机环境  ubuntu 14.4宿主机环境(云主机): 安装wget与curl(sudo apt-get install wget curl)2.安装Docker (wget -q ...

java 对象数组定义

下面代码实现了定义一个数组对象 public class Student { private String username; private int num; public Student(Stri ...

linux 系统命令和方法

1.EXPORT EXPORT 依赖库===============export LD_LIBRARY_PATH=/opt/export LD_LIBRARY_PATH=/usrlib/ 2.查看分区 ...

Linux服务器配置---安装telnet

安装telnet      telnet是标准的远程登录协议,历史悠久.但是telnet的对话数据没有加密,甚至用户名和密码都是明文显示,这样的服务风险极大.目前大多数系统多已经不会再安装这个服务了, ...

鼓捣phantomjs(二) node&period;js模块化集成

著作权所有:http://www.cnblogs.com/zeusro/ 引用(爬虫)不给稿费的,切你jj 追忆似屎年华 在上一篇post(http://www.cnblogs.com/zeusro/ ...

etl是什么

ETL (数据仓库技术) ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).交互转换(transform).加载(load)至目的 ...