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

Question

更新：看起来这只是 Safari iOS 上的特定错误。作为 Web 应用程序加载的网站（保存在主页上）不显示 相同的间隙/缓冲区。你应该只能解决这个问题。

JSBIN - 在 Mobile safari 与其他浏览器上查看。

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

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

---

原帖

这是 DIV 中文本区域的一个非常基本的精简版本，底部固定。

我正在使用 Flat Bootstrap Admin V3 模板，该模板必须调试很长时间，因为许多消息传递部分存在问题。

我的页面在所有浏览器上都能正确显示，除了 Mobile Safari，它在我的文本字段成为焦点时在键盘和正文之间创建了一个缓冲区/间隙。

我设法解决了大部分错误，但是在移动设备方面，我在 iOS Safari 上遇到了这个问题，当 我专注于文本区域时，它在网页下创建 额外的缓冲区（我在 100VH 使用 body max-height - Buggy 我知道，但我已经使用 JS 和 $(window).innerHeight() 解决了这个问题，效果很好），没有不管我怎么做。

我尝试使用 JS 将所​​有不同的 div 高度（包括身体高度）调整为再减去 60 像素，但仍然存在差距。所有其他浏览器都将粘贴在键盘的正上方，但 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 显示的其他移动浏览器 没有额外的缓冲区就可以了。

更新（来自 cmets 的问题的答案）

我的元标题已经设置如下

<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”。但如果我没记错的话，这只有在相关项目位于/接近底部时才有效。

希望这会有所帮助...

Answer 2

首先，您是否有可能不直观地应用的媒体查询？

其次，当您使用弹性框时，在页面底部的页脚容器中对齐所有元素：为什么不制作 .footer 容器

display: flex flex-direction: column-reverse;

第三：考虑使用

margin-top: auto; 

将元素强制到其父容器的底部，类似于：

justify-content: flex-start;

也就是说，如果您没有在容器上使用 justify-content，这可能是您问题的根源。

最后，这不是最可维护和最理想的解决方案，但应该做到这一点，如果您可以确定元素以这种方式定位是由于您无法控制的浏览器问题，那么您也有选择。想到操作系统检测和负边距。使用 javascript，设置负边距底部可以根据需要重新定位您的元素。

    //safari
    var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);

    //ios
    var isIos = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)

    //Version
    var isIosVersion= /(iPhone)*(OS ([7-9]|1[0-9])_)/i.test(navigator.userAgent);