テキスト入力エリアを私のwebviewの一番下に置く方法

Question

私はxcodeの中でwebviewを使って、ホステッドチャットのインターフェースをレンダリングしています。 Safariのチャットインターフェイスを使用しているとき、テキスト入力領域は常に下にとどまります。 しかし、私がウェブビューの中で使用しているときに、スクロールエリアが高くなってからテキストエリアがテキストと共にスクロールし、折りたたみの上に表示されてしまいます。 キーボードを閉じて（「完了」ボタンで）、もう一度開いたら、下に戻ります。

上部の領域はスクロールするものの、下部に配置するにはどのようなCSS設定を使用する必要がありますか？

は、現在、私のフッターのコードは次のようになります。

<div class="footer"> 

       <div class="form-wrapper"> 
       <form lpformnum="1" _lpchecked="1"> 

        <div class="input-group"> 

         <input type="text" id="userInput" name="userInput" class="form-control" placeholder="I would like to..." style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;" autocomplete="off"> 

         <span class="input-group-btn"> 
         <button type="button" id="SendMessage" class="btn btn-primary">Send</button> 
         </span> 

        </div> 

       </form> 
       </div> 

     </div> 

とフッターのdiv CSS：スクロール前

.footer { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
    height: 50px; 
    max-width: 100%; 
    /* margin-right: auto; */ 
    /* margin-left: auto; */ 
    background-color: #ffffff; 
    transition: buttom; 
} 

が始まる：

後：

Answer 1

あなたはこのように下に位置決定および設定された位置を使用することができます。

.footer { 
position: fixed; 
bottom: 0; 
right: 0; 
left: 0; 
z-index: 1030; 
height: 50px; 
max-width: 100%; 
background-color: #ffffff; 
transition: buttom; /* I use same css which you used and I wonder how this will work*/ 

}