H5頁面 絕對定位元素被 軟鍵盤彈出時頂起

在h5頁面開發的過程中，我們可能會遇到下面這個問題，當頁面中有輸入框的時候，系統自帶的軟盤會把按鈕擠出原來的位置。那么我們該怎么解決呢？下面列出一下的方法：

一：設置html和body高度，之后將按鈕相對於body定位 (這里的body需要設置高度為100%)：

html,body{
    position:relative;
    height:100%;
    min-height:100%;
}
button{
    position:absolute;
    bottom:0;
}

二：利用 css sticky footer 進行頁面的排版

css sticky footer功能介紹：如果頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；如果內容足夠長時，頁腳塊會被內容向下推送。（具體介紹請點擊傳送門）

flex布局：傳送門 

 核心樣式代碼：

整個頁面的大容器(如body):

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

　　

需要固定的元素，比如視窗底部，如果內容足夠長時，頁腳塊會被內容向下推送。

.footer{
  height: 100px;
}

內容的容器：

.content{
  flex: 1;
}

 

 

我們利用核心代碼寫一個小例子看看效果：

html:

<div class="header">
   header
</div>
<div class="content">
   content
</div>
<div class="footer">
    footer
</div>

css:

body{
　　display:flex;
   flex-direction:column;
　　min-height:100vh;
}
.header,.footer{
  width: 100%;
  height: 100px;
  background-color: #ddd;
  color: #fff;
}
.content{
  width: 100%;
  flex: 1;
  background-color: #000;
  color: #fff;
}

　　

效果圖：

 

如果我們王content中添加內容，直到溢出：

html:

<div class="content">
       <h1>內容超出容器高度</h1>
       <h1>內容超出容器高度</h1>
       <h1>內容超出容器高度</h1>
       <h1>內容超出容器高度</h1>
       <h1>內容超出容器高度</h1>
       <h1>內容超出容器高度</h1>
       <h1>內容超出容器高度</h1>
       <h1>內容超出容器高度</h1>
        <h1>內容超出容器高度</h1>
       <h1>內容超出容器高度</h1>
        <h1>內容超出容器高度</h1>
        <h1>內容超出容器高度</h1>
        <h1>內容超出容器高度</h1>
        <h1>內容超出容器高度</h1>
        <h1>內容超出容器高度</h1>
        <h1>內容超出容器高度</h1>
    </div>

效果為：

    

 這個時候我們需要的效果就實現了。

 

三：利用~同輩選擇器進行頁面的排版（適用於輸入框和按鈕是同輩元素）

#contents:focus ~ button { display: none }