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

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

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

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

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

解决方法：

来先看一下页面结构

这里是页面的标题

这里是页面的主题

这里是页面的底部

header 在页面的最顶部，始终在页面的顶部，footer始终在页面的底部，不管main里面的文章有没有把整个body给撑开，footer始终在底部。这里面隐藏着两个问题：第一：如果main的内容非常少的话，则footer必须在页面得底部，则我们很快就会想起来我们会用定位来解决这个问题。如果我们用定位footer定位在页面的最下边，则header和main也得用定位。这样子表面上看起来好像问题解决了，实际上则不染，当我们在main的input框中获取焦点的时候，软键盘被弹起，则footer也就会顶起来，那怎么办呢？如果我们不用定位，用正常的文档流来写页面，如果main的内容撑不开整个页面，则footer会紧贴着main，我们在main的input框中获取焦点的时候，然键盘被弹起，这时footer就不会被弹起；软件盘弹起的问题解决了，但是footer怎么固定到底部的问题没有解决。。。。。我们可以自己写jquery获取当前的分辨率来进行计算。但是有没有更简单的办法呢？

方法一：

采用flex布局的方发解决，直接上代码吧：

body{

{ display: flex; display: -webkit-flex; min-height: 100vh; flex-direction: column;}

}

header{

height: 54px;

}

main{

flex: 1; width: 100%;

}

footer{

height: 4rem;

}