问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

我正在使用引导程序，但我在自己的 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 许可协议

Stack Overflow 翻译androidhtmlcssbootstrapmobile-browser
阅读 230
2 个回答
得票最新
社区维基
1
✓ 已被采纳

使用 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 许可协议

社区维基
1

我发现 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 许可协议

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