android按钮在容器下方,解决安卓手机上底部按钮固定，弹出软键盘后挡住input输入框的问题...

移动端页面，经常会用到一种内容是一个表单，底部固定一个按钮的布局，一般这个按钮基本都是通过绝对定位或固定定位固定到底部，但是在安卓机下，这种布局会造成，当焦点到输入框，软键盘弹出后，内容部分会被挡住，用户体验很不好，可以采用flex布局来解决这个问题。

html代码：

这里面是input输入框等。。。。

提交

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%的时候，按钮会在页面内容最后面，而不是固定在最下面。