【问题标题】：How to prevent mobile keyboard from rising footer over the text fields?如何防止移动键盘在文本字段上方上升页脚？
【发布时间】：2014-05-02 21:16:42
【问题描述】：

我的页脚有问题。我希望页脚留在屏幕底部，但有一个小问题。使用移动浏览器时，某些字段在打开键盘时会被页脚挡住。页脚从键盘上方升起并挡住您正在输入的字段。如何将页脚保持在底部并防止它从键盘上方升起？我希望它隐藏在键盘下。

我正在使用引导程序，但我在自己的 CSS 中设置了以下内容：

footer {
 width: 100%;
 position:absolute;
 left:0px;
 bottom:0px;
 height: 40px;
 margin: auto;
 overflow: hidden;
 background:#2E2E2E;
 text-align:center;
 line-height: 15px;
 color: #fff;

}

<html>
 <body>
  <div class="container">
  </div>
  <footer class="bs-footer" role="contentinfo">
 </body>
</html>

如您所见。当我激活“Salasana”字段时，页脚会上升并挡住文本字段。

打开键盘前：

打开键盘后：

【问题讨论】：

因为位置，bottom:0px 会一直粘在底部

标签： android html css twitter-bootstrap mobile-browser

【解决方案1】：

尝试使用位置：相对或固定

如果你想让你的页脚在底部，你应该在 body 中添加 min-height

【讨论】：

【解决方案2】：

通过 avinash 帮助解决了问题。我最终在我的 CSS 中更改了以下内容。由于我在容器 div 中拥有所有内容，因此我将容器高度设置为 100% - 页脚。我还从页脚中删除了底部：0px。

footer{
 position: relative;
}
html,body {
    height: 100%; /* Needed for container's min-height  */  
}

.container{
    min-height:100%;
    margin-bottom: -40px; /* Put negative height of the footer here */
    padding-bottom: 40px; /* Put height of the footer here. Needed for higher than screen height pages */
}

【讨论】：

你设置了.container {}的位置属性了吗？如果有，那是什么？
@AdrianMadaras，这里不是问新问题的地方。如果尚未解决，请随意发布您自己的一篇。
另外我希望页脚在滚动时固定在屏幕上。为此，我必须使用position: fixed;，但由于我已删除bottom:0px;，因此不可见

【解决方案3】：

如果您不想更改 html 代码，可以尝试使用 JS 修复此问题。

我们从顶部获取当前位置，设置顶部样式值，并重置底部值。

var fixed = document.querySelector(".fixed"),
    distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';

【讨论】：

【解决方案4】：

我发现here on StackOverflow 发布的解决方案非常有用。它包括一个 javascript sn-p 为我解决了这个问题，粘贴在下面；

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

【讨论】：

【解决方案5】：

对于固定位置的页脚，我将其相对于顶部而不是底部进行定位：

footer {
  position: fixed;
  height: 40px;
  top: calc(100vh - 40px);
  /* bottom: 0; */
}

【讨论】：