要做一个手机端登录页面,美工给的设计图呢是左边底部有一个创建账号的按钮,右边底部是忘记密码。
那么问题来了!怎么让它能够永远都在下面呢!无论什么手机款式都要在页面的最下面!
度娘了一番,原来大家管这个叫footer。
<div class="footer" id="footer">
<div class="footerLeft">
<a id="CreateAccount" href="signUp.html" style="color:white;">
创建账号
</a>
</div>
<div class="footerRight">
<a id="ForgetPassword" href="forgetPw.html" style="color:white;">
忘记密码?
</a>
</div>
</div>
.footer{
position: fixed;
bottom: 0px;
width: 90%;
height: 30pt;
z-index: 9999;
font-size: small;
left:0;
right:0;
bottom:0;
margin:auto;
}
.footerRight{
float:right;
}
.footerLeft{
float:left;
}
然而……如果事情只有那么简单该多好
后来手机端测试,发现输入东西的时候,键盘会把footer顶起来……_(:з」∠)_
于是又是一轮度娘之旅,好在原来大家也都遇到过这样的毛病,发现了大佬的经验分享
解决H5手机端唤起键盘,底部的footer一起上去的方法
总的来说呢这个方案就是,监听window的resize事件,假如你的页面高度发生变化(就是键盘出来啦),就把footer给隐藏掉。键盘消失的时候,又会自己跑出来。这样就会让人误以为footer一直在下面,只是被掩盖掉了XD Tricky Way~
var oHeight = $(document).height(); //屏幕当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
console.log("hidden");
$("#footer").attr("hidden","hidden");
}else{
console.log("remove--hidden");
$("#footer").removeAttr("hidden");
}
});
一只小菜鸟的踩坑笔记XD