关于移动端底部定位问题

Posted 2020-10-08

移动端的页面有些内容是需要固定在底部，一般会采用fixed，当页面中input获取到焦点的时候，

这时候底部的内容就会被顶上来

如果是按钮被顶上来，有时候不会影响页面效果，可是当底部是一些广告或者注意事项的时候，这时候这种效果就不行了。

解决办法，：

.mdfMessageBtn{
    width:100%;
    height:50px;
    background-color: #ffb000;
    color:#fff;
    position:absolute;
    bottom:0;
    font-size: 16px;
}
html:

<div class="userContainer" style="position: relative; ">

　　<button class="mdfMessageBtn">立即支付</button>

</div>

js:

loadBtn(".userContainer",".mdfMessageBtn");
/*按钮定位*/
function loadBtn(boot,loat){
    var height=$(window).height();
    $(boot).css("min-height",height);
    var uHeight=$(boot).height();
    if(uHeight<=height){

　　　}else{
        $(loat).css({"position":"relative"})

    }
};
给按钮绝对定位，给其父级相对定位，获取屏幕高度，让其父级的最小高度为屏幕的高度，