如何将文本输入区域保留在webview的底部

Question

我在xcode中使用webview来呈现托管聊天界面。 当我使用Safari的聊天界面时，文本输入区始终位于底部。 然而，当我在webview中使用时，文本区域在滚动区域越来越高之后与文本一起滚动，并且在一段时间后消失在折叠之上。 如果我关闭键盘（使用“完成”按钮）并重新打开它，它会回到底部。

我需要使用什么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*/

}