使用flex布局解决安卓手机上固定在底部的按钮，在键盘弹起后挡住input输入框的问题

移动端经常会出现，一个表单里面，确定按钮固定在底部这样的布局，一般会让按钮absolute或者fixed，这样在ios上没有问题，但是在安卓手机上，当表单里面的input输入框获得焦点的时候，按钮会挡在表单上，影响美观。这个可以采用flex布局完美解决。

HTML代码

<div class="mui-content bg-white">
		<div class="container-box">
			<form>  这里面是input输入框等。。。。</form>
		</div>
		<div class="operate mt30">
			<button class="mui-btn mui-btn-block btn-submit"  type="button" id="submitButton">提交</button>
		</div>
	</div>

css代码

html,body{padding: 0;margin: 0;height:100%}
.mui-content{height:100%;display: flex;display:-ms-flex;display:-webkit-flex;    flex-direction: column;}
.container-box{flex:1;-ms-flex:1;-webkit-flex:1}
.operate {
	position: relative;
    margin:1rem 1rem 3rem;
}
.operate .btn-submit {
    width: 100%;
    border-radius: .2rem;
    height: 2rem;
    color: #fff;
    font-size: .8rem;
    line-height: 1;
    padding: 0;
    letter-spacing: 1px;
    border: 0;
    background-color: #00aaee;
}

说明：给html，body，还有body内的容器div设置高度100%，撑满屏幕。容器div设置display：flex显示，并设置flex的方向为column，设置容器div里面表单部分为flex：1，然后下面的按钮控件就相对定位好就行，这样表单部分的高度就等于页面高度减去按钮部分的高度。在安卓手机上，键盘弹出时，按钮不会遮挡到上面的表单部分。
另外，如果页面高度有可能超过100%，那就不要设置高度 height：100%，而是设置min-height：100%，这样一来，在页面高度不超过100%的时候，按钮会固定在最下面，在页面超过100%的时候，按钮会在页面内容最后面，而不是固定在最下面。