移動端經常會出現，一個表單里面，確定按鈕固定在底部這樣的布局，一般會讓按鈕absolute或者fixed，這樣在ios上沒有問題，但是在安卓手機上，當表單里面的input輸入框獲得焦點的時候，按鈕會擋在表單上，影響美觀。這個可以采用flex布局完美解決。
HTML代碼
提交
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%的時候，按鈕會在頁面內容最后面，而不是固定在最下面。
