H5端关于input框输入软键盘弹起底部固定的解决方法

最近工作中做了一个关于H5端的项目，用不同机型自身带的浏览器测试页面，用手机上安装的UC、QQ浏览器测试页面的兼容性，各种问题都出现了，遇到这么多的问题，头都炸毛了。不过最为严重的也就只有两个问题，关于form表单中input获取焦点的时候软键盘弹起，固定在底部的内容被弹起遮盖住了页面的内容，不符合项目的要求。不过经过测试，发现华为mate8手机自身带的浏览器解析css还算是比较严谨的，因为就他的兼容性要求比较高，问题比较多。闲话少说，步入正题吧：

先说问题：1、页面中input输入框获取焦点的时候，软键盘弹起来，固定在页面底部的标签被顶起来了，遮盖住了页面中的内容，这样子页面的友好性不好；

2、登录页面，输入手机号时软键盘弹起把页面底部的版权给弹起来挡住了密码的输入框了，不满足项目的需求，所以想让底部的版权始终固定在底部。

经过在网上搜索，发现遇到这种问题的还很多，于是自己就写例子，按照他们的提供的方法各种尝试，发现大部分都不能解决问题，然而天无绝人之路，经过努力，最终还是发现了一篇好的文章，是可以解决我的问题的，加上自己搜索和思考，发现其原理，现在写出来分享给大家参考，但是这个方法还是有一定的局限性的，不过可以解决我项目中的问题

解决方法：

来先看一下页面结构

<header>

<h1>这里是页面的标题</h1>

</header>

<