遇到几次这种问题了,之前一直没写处理方法,导致每次遇见都要花很多时间找解决方案。
只有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;
}
<div class="login_footer" id="login_footer">
<div><a href="#"> 招商加盟</a></div>
<div onclick="Show()">
联系客服
</div>
</div>
$(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" })
}
});
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。