身体标签下方的额外间隙/缓冲区(没有人可以解决这个问题)

Question

更新:看起来这只是Safari iOS上的特定错误.网站作为网络应用程序加载(保存在家中)不会显示相同的差距/缓冲区.你应该只能解决这个问题.

JSBIN - 在移动safari上查看它与其他浏览器.

实时输出:http://output.jsbin.com/winuta/

JSBin:http://jsbin.com/winuta/edit？html,js,output

---

原帖

这是DIV中文本区域的一个非常基本的精简版本,具有固定到底部.

我正在使用Flat Bootstrap Admin V3模板,由于许多消息传递部分都是错误的,因此必须对其进行长时间的调试.

我的页面在所有浏览器上都能正确显示,但Mobile Safari会在我的文本字段为焦点时在键盘和正文之间创建缓冲区/间隙.

我设法解决了大部分的bug,但是当涉及到移动时,我在iOS Safari上遇到了这个问题,当我专注于文本区域时,它会在网页下创建额外的缓冲区(我在100VH时使用body max-height - Buggy我知道,但我已经使用JS和$(window).innerHeight()解决了这个问题,无论我怎么做都很好.

我尝试使用JS调整所有不同的div高度,包括身高到减去另外60px,它仍然留下了差距.所有其他浏览器都会粘在键盘上方,而不是iOS Safari.

任何人都可以解雇一些？

文本区号

<div class="footer">
          <div class="message-box">
            <textarea id="draftmsg" placeholder="type something..." class="form-control"></textarea>
            <button id="sendmsg" class="btn btn-default"><i class="fa fa-paper-plane" aria-hidden="true"></i><span>Send</span></button>
          </div>

这个模板主要基于flex,但对于我使用的页脚

.footer {
position: relative; /*Relative to the text display area which occupies whole viewport minus footer*/
bottom: 0;
}

上图显示了没有键盘时它应该如何正常显示,用户无法滚动文本区域,因为文本区域粘到底部.

但图像显示了移动旅行中键盘和文本区域之间的差距

上图显示其他移动浏览器Chrome和Firefox显示正常,没有额外的缓冲区.

更新(评论问题的答案)

我的元标题已经设置如下

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>   
<meta name="apple-mobile-web-app-capable" content="yes" />   
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

完整的页脚CSS

.app-messaging .messaging > .footer {
    width: 100%;
    padding: 8px;
    background-color: #dfe6e8; }

.app-messaging .messaging > .footer .message-box {
    background-color: #FFF;
    border-radius: 2px;
    box-shadow: 0 1px 1px #c8d1d3;
    width: 100%;
    height: 80px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-top: 1px solid #dfe6e8; }
.app-messaging .messaging > .footer .message-box textarea, .app-messaging .messaging > .footer .message-box button {
    margin-bottom: 0;
    border: 0;
    height: 100%;
    border-radius: 0; }
.app-messaging .messaging > .footer .message-box textarea {
    -ms-flex: 1;
    flex: 1; }
.app-messaging .messaging > .footer .message-box button {
    border-left: 1px solid #dfe6e8;
    color: #29c75f; }
.app-messaging .messaging > .footer .message-box button .fa {
        margin-right: 1rem; }
#draftmsg {
    line-height: normal;
    padding-bottom: 0;
    margin-bottom: 0;
}

Answer 1

我的移动网络调试非常不稳定，而且我主要是后端开发人员，所以如果我错了，请原谅......

我相信这可能是因为bottom: 0。将其更改为top:属性以进行检查。这可能没有多大帮助，因为您确实需要将其放在底部，但如果这是问题所在，请考虑切换到 Flexbox 来定位它（如果可能）。

如果没有，修复可能涉及在视口元标记中设置“height=device-height”。但如果我没记错的话，只有当相关项目位于/接近底部时才有效。

希望这可以帮助...