首页 > 代码库 > 移动端input的虚拟键盘影响布局
移动端input的虚拟键盘影响布局
移动布局经常会使用绝对定位(absolute)和固定定位(fixed)来布局一个层。然后这个层上面会有一些信息,当这个层上面为input时,移动端输入信息则会弹出虚拟键盘,从而会影响我们的布局,给我们带来困扰。经常碰到却很少整理,再次碰到又是一头雾水,趁着这次有空,我把我测试成功的方法记录下来。具体看自己情况应用,纯属个人试验。
情况一、用absolute写的一个层(class名为elayer),层设置有背景颜色,然后层上面布局有input。当点击input软键盘弹出后,这个层向上面移动背景随之向上,然后下面会有部分空白,背景为默认色不是所设置的背景色。原来设置如下:
.evalLayer{position:absolute;width:100%;height:100%;background:rgb(81,79,97);top:0;left:0;z-index:11;}
解决如下:
.eLayer{position:absolute;width:100%;min-height:100%;bottom:0;background:rgb(81,79,97);top:0;left:0;z-index:11;overflow-y:auto;}
后续更新中
移动端input的虚拟键盘影响布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。