移動端經常會出現，一個表單里面，確定按鈕固定在底部這樣的布局，一般會讓按鈕absolute或者fixed，這樣在ios上沒有問題，但是在安卓手機上，當表單里面的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%的時候，按鈕會在頁面內容最后面，而不是固定在最下面。

總結

以上是生活随笔為你收集整理的android按钮在容器下方,使用flex布局解决安卓手机上固定在底部的按钮，在键盘弹起后挡住input输入框的问题...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。