提交
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解决软键盘遮挡输入框问题
链接 /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,TextView编辑时，输入框被键盘遮挡的问题
方法1:在原来的 UIViewController 内部再添加一层 UITableViewController 代码如下 : // // ViewController.m // 键盘遮挡问题 // / ...
移动端解决input focus后键盘弹出，高度被挤压的问题
//解决弹出键盘页面高度变化bug var viewHeight = window.innerHeight; //获取可视区域高度 $("input").focus(functio ...
去掉移动端页面 input, textarea, button, 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/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.js模块化集成
著作权所有:/zeusro/ 引用(爬虫)不给稿费的,切你jj 追忆似屎年华 在上一篇post(/zeusro/ ...
etl是什么
ETL (数据仓库技术) ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).交互转换(transform).加载(load)至目的 ...
如果觉得《js手机键盘遮挡_移动端页面input输入框被键盘遮挡问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
