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

Question

  

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

JSBIN - 在移动版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的身体最大高度 - 我知道Buggy，但我已经使用JS和$（窗口）.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”。但是如果我没记错的话，那只有在有问题的物品位于底部/附近时才有效。

希望这会有所帮助......

Answer 2

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

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

display: flex flex-direction: column-reverse;

第三：考虑使用

margin-top: auto; 

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

justify-content: flex-start;

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

最后，并非最可维护和理想的解决方案，但应该是应有的，如果您可以确定元素由于您无法控制的更广泛的问题而以这种方式定位，您也可以选择。想到操作系统检测和负边距。使用javascript，设置负margin-bottom可以根据需要重新定位元素。

    //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);