资讯专栏INFORMATION COLUMN

底部菜单被输入法顶上去的解决方案

Alex / 1479人阅读

摘要:底部菜单被输入法顶上去的解决方案一最开始页面结构是酱紫的,如图二展示下问题三解决后来说说解决方案吧这个一定要写招商加盟联系客服浏览器当前的高度下面加的样式根据具体情况添加若里面只有一个是不需要加左右浮动的

遇到几次这种问题了,之前一直没写处理方法,导致每次遇见都要花很多时间找解决方案。
只有android系统会出现这个问题,为了以后能够快速解决问题,还是记录一下吧。

底部菜单被输入法顶上去的解决方案

一、最开始页面结构是酱紫的,如图:

二、展示下问题

三、解决后

来说说解决方案吧:
.login_footer {

width: 7.5rem;
height: .9rem;
line-height: .9rem;
display: -webkit-box;
display: -ms-box;
display: -moz-box;
display: -o-box;
box-align: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
                      
 position: absolute;  /*这个一定要写*/

}

.login_footer > div {

text-align: center;
display: block;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
bottom: 0;

}



$(function () {
    var oHeight = $(document).height(); //浏览器当前的高度

    $(window).resize(function () {

        if ($(document).height() < oHeight) {

            $("#login_footer").css({ "position": "static","display":"none" });
        } else {
            //下面加的样式根据具体情况添加
            //若 login_footer 里面只有一个div 是不需要加div左右浮动的
            $("#login_footer").css({ "position": "absolute", "display": "block", });
            $("#login_footer div").css({ "width": "50%", "display": "inline-block",  "height": ".9rem" })
            $("#login_footer div:nth-child(1)").css({ "float": "left"})
            $("#login_footer div:nth-child(2)").css({ "float": "right" })
        }

    });
});

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51482.html

相关文章

  • 底部菜单入法上去解决方案

    摘要:底部菜单被输入法顶上去的解决方案一最开始页面结构是酱紫的,如图二展示下问题三解决后来说说解决方案吧这个一定要写招商加盟联系客服浏览器当前的高度下面加的样式根据具体情况添加若里面只有一个是不需要加左右浮动的 遇到几次这种问题了,之前一直没写处理方法,导致每次遇见都要花很多时间找解决方案。只有android系统会出现这个问题,为了以后能够快速解决问题,还是记录一下吧。 底部菜单被输入法顶上...

    teren 评论0 收藏0
  • 底部菜单入法上去解决方案

    摘要:底部菜单被输入法顶上去的解决方案一最开始页面结构是酱紫的,如图二展示下问题三解决后来说说解决方案吧这个一定要写招商加盟联系客服浏览器当前的高度下面加的样式根据具体情况添加若里面只有一个是不需要加左右浮动的 遇到几次这种问题了,之前一直没写处理方法,导致每次遇见都要花很多时间找解决方案。只有android系统会出现这个问题,为了以后能够快速解决问题,还是记录一下吧。 底部菜单被输入法顶上...

    charles_paul 评论0 收藏0
  • vue 手机键盘把底部按钮上去

    摘要:背景在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了。原来的样式主要是当输入法点击出现时候修改为绑定动态,,通过来显示动态显示,初始值设置另外设置初始屏幕高度变化屏幕高度。 背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了。 showImg(https://segmentf...

    jiekechoo 评论0 收藏0
  • 手机软键盘弹起导致页面变形一种解决方案

    摘要:最近用一种第三方开发框架开发,其中一个页面有十几个输入框,在点击输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了,布局全被打乱。等输入完,软键盘收起时,页面恢复原状。 最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了,...

    X_AirDu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<