我的页脚有问题。我希望页脚停留在屏幕的底部，但是有一个小问题。使用移动浏览器时，打开键盘时某些字段会被页脚阻止。页脚从键盘上升并阻挡您正在键入的字段。如何将页脚保持在底部并防止其从键盘上升？我希望它隐藏在键盘下面。
我正在使用bootstrap，但我在自己的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”字段时，页脚会上升并阻止文本字段。
用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 */
}
我发现解决方案发布here on 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);
}
})
}
尝试使用position：relative或fixed
如果你想让你的页脚在底部，你应该增加身高的最小高度
如果您不想更改html代码，可以尝试使用JS修复此问题。
我们从顶部获得当前位置，设置顶部样式值，并重置底部值。
var fixed = document.querySelector(".fixed"),
distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';