Wie man den Texteingabefeld am unteren Rand meiner Webansicht hält

Question

Ich verwende eine Webansicht innerhalb von xcode, um eine gehostete Chat-Oberfläche zu rendern. Wenn ich die Chat-Oberfläche von Safari verwende, bleibt der Texteingabebereich immer unten. Wenn ich jedoch in der Webansicht verwende, scrollt der Textbereich zusammen mit dem Text, nachdem der Bildlaufbereich höher wird, und nach einer Weile verschwindet er über der Falte. Wenn ich die Tastatur schließe (mit der "Fertig" -Taste) und sie wieder öffne, ist sie wieder unten.

Welche CSS-Konfiguration muss ich verwenden, um sie unten zu halten, obwohl der Bereich darüber scrollt?

Derzeit sieht mein Footer Code wie folgt aus:

<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> 

und die Fußzeile 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; 
} 

Bevor Scrollen beginnt:

Nach:

Answer 1

können Sie Standortposition verwenden und Position nach unten wie folgt aus:

.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*/ 

}