zoukankan      html  css  js  c++  java
  • 移动端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;}

    后续更新中

      

  • 相关阅读:
    重温redis命令
    CI框架整合yar
    redis 常用配置
    php 安装yar扩展
    linux 最小安装 需要的后续操作
    centos7 安装php7+mysql5.7+nginx+redis
    mysql 存储过程和事件调度
    mysql的分区和分表
    mysql 范式和反范式
    mysql服务器和配置优化
  • 原文地址:https://www.cnblogs.com/kangby/p/7049783.html
Copyright © 2011-2022 走看看