码迷,mamicode.com
首页 > 移动开发 > 详细

关于移动端底部定位问题

时间:2017-09-27 11:40:50      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:htm   支付   html   load   效果   function   mdf   absolute   屏幕高度   

移动端的页面有些内容是需要固定在底部,一般会采用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"})
    }
};
给按钮绝对定位,给其父级相对定位,获取屏幕高度,让其父级的最小高度为屏幕的高度,

关于移动端底部定位问题

标签:htm   支付   html   load   效果   function   mdf   absolute   屏幕高度   

原文地址:http://www.cnblogs.com/choin/p/7600485.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!