底部菜單被輸入法頂上去的解決方案

遇到幾回這種問題了,以前一直沒寫處理方法,致使每次碰見都要花不少時間找解決方案。
只有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" })
        }

    });
});
相關文章
相關標籤/搜索