Android 如何防止移动键盘在文本字段上抬高页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22627646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent mobile keyboard from rising footer over the text fields?
提问by Firze
I am having trouble with my footer. I want the footer to stay at the bottom of the screen, but there is a slight problem. When using mobile browser, some fields get blocked by the footer when opening the keyboard. The footer rises over the keyboard and blocks the field you are typing in. How can I keep my footer at the bottom and prevent it from rising over the keyboard? I want it to stay hidden under the keyboard.
我的页脚有问题。我希望页脚停留在屏幕底部，但有一个小问题。使用移动浏览器时，打开键盘时某些字段会被页脚挡住。页脚高出键盘并挡住您正在输入的字段。如何将我的页脚保持在底部并防止其高出键盘？我希望它隐藏在键盘下。
I am using bootstrap, but I have set the following stuff in my own CSS:
我正在使用引导程序，但我在自己的 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>
As you can see here. When I am activating the field "Salasana", the footer rises and blocks the text field.
正如你在这里看到的。当我激活“Salasana”字段时，页脚会上升并挡住文本字段。
Before opening the keyboard:
打开键盘之前：
After opening the keyboard:
打开键盘后：
采纳答案by Firze
Solved the problem with avinash help. I ended up changing the following in my CSS. Since I have all the content inside the container div I made container height 100% - footer. I also removed bottom:0px from footer.
使用 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 */
}
回答by Adam Davis
I found the solution posted here on StackOverflowto be pretty helpful. It includes a javascript snippet that solved the issue for me, pasting below;
我发现在 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);
}
})
}
回答by Adam Davis
Try to use position:relative or fixed
尝试使用位置：相对或固定
If you want your footer at bottom you should add min-height to body
如果您希望页脚位于底部，则应将 min-height 添加到 body
回答by Sergei Panfilov
In case you don't want to change html code, you can try fix this with JS.
如果您不想更改 html 代码，可以尝试使用 JS 解决此问题。
We are getting current position from top, setting the top style value, and resetting bottom value.
我们从顶部获取当前位置，设置顶部样式值，并重置底部值。
var fixed = document.querySelector(".fixed"),
distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';
