H5 永远固定（伪）在底下的footer！

要做一个手机端登录页面，美工给的设计图呢是左边底部有一个创建账号的按钮，右边底部是忘记密码。

那么问题来了！怎么让它能够永远都在下面呢！无论什么手机款式都要在页面的最下面！

度娘了一番，原来大家管这个叫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一起上去的方法

https://blog.csdn.net/qq_39234840/article/details/82178921

总的来说呢这个方案就是，监听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