如何防止移动键盘在文本字段上升高页脚?

新手上路,请多包涵

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

我正在使用引导程序,但我在自己的 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”时,页脚会上升并挡住文本字段。

打开键盘前:

前

打开键盘后:

后

原文由 Firze 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 228
2 个回答

使用 avinash 帮助解决了问题。我最终在我的 CSS 中更改了以下内容。由于容器 div 中包含所有内容,因此我将容器高度设置为 100% - 页脚。我还从页脚中删除了 bottom: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 */
}

原文由 Firze 发布,翻译遵循 CC BY-SA 3.0 许可协议

我发现 StackOverflow 上发布的解决方案非常有用。它包括一个为我解决问题的javascript片段,粘贴在下面;

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

原文由 Adam Davis 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题