遇到幾回這種問題了,以前一直沒寫處理方法,致使每次碰見都要花不少時間找解決方案。
只有android系統會出現這個問題,爲了之後可以快速解決問題,仍是記錄一下吧。css
底部菜單被輸入法頂上去的解決方案android
1、最開始頁面結構是醬紫的,如圖:
web
2、展現下問題
瀏覽器
3、解決後
flex
來講說解決方案吧:
.login_footer {spa
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; /*這個必定要寫*/
}code
.login_footer > div {blog
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" }) } }); });