移动端fixed定位固定在底部 ios手机里为啥会遮住一半 滑动一下才显示全部 css
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端fixed定位固定在底部 ios手机里为啥会遮住一半 滑动一下才显示全部 css相关的知识,希望对你有一定的参考价值。
position:fixed;相对于窗口的固定定位。已经脱离文本流,没指定位置,所以会在原来位置。父级没有宽度,所以默认宽度。内容肯定就溢出父级了。 参考技术A 不分身份和地位关于移动端底部定位问题
移动端的页面有些内容是需要固定在底部,一般会采用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"})
}
};
给按钮绝对定位,给其父级相对定位,获取屏幕高度,让其父级的最小高度为屏幕的高度,
以上是关于移动端fixed定位固定在底部 ios手机里为啥会遮住一半 滑动一下才显示全部 css的主要内容,如果未能解决你的问题,请参考以下文章