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

【问题标题】：How to keep text input area at the bottom of my webview如何将文本输入区域保留在我的 webview 的底部
【发布时间】：2016-10-07 11:28:24
【问题描述】：

我在 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;
}

滚动开始前：

之后：

【问题讨论】：

你知道自动布局吗？

标签： html css xcode webview chat

【解决方案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*/

}

【讨论】：

不幸的是它没有帮助。使用浏览器时没问题（即使使用“绝对”键），但在 webview 中，结果与附件一样。