本文介绍了如何防止移动键盘在文本字段上滚动页脚？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我使用bootstrap，但我在自己的CSS中设置了以下内容：

  footer {
 width：100％; 
位置：绝对; 
 left：0px; 
 bottom：0px; 
 height：40px; 
 margin：auto; 
 overflow：hidden; 
背景：＃2E2E2E; 
 text-align：center; 
 line-height：15px; 
颜色：#fff;

}

 < HTML> 
< body> 
< div class =container> 
< / div> 
< footer class =bs-footerrole =contentinfo> 
< / body> 
< / html>

正如你在这里看到的。当我激活字段Salasana时，页脚上升并阻止文本字段。

在打开键盘之前：

打开键盘后：

解决方案

用aaveash帮助解决了这个问题。我最终改变了我的CSS中的以下内容。由于我具有容器div内的所有内容，因此我将容器高度设置为100％ - 页脚。

 页脚{
 position：relative; 
} 
 html，body {
 height：100％; / *需要容器的最小高度* / 
} 
 
 .container {
最小高度：100％; 
 margin-bottom：-40px; / *在此处设置页脚的负高度* / 
 padding-bottom：40px; / *在此处放置页脚的高度。需要高于屏幕高度的网页* / 
}

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:

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.

Before opening the keyboard:

After opening the keyboard:

解决方案

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.

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 */
}

这篇关于如何防止移动键盘在文本字段上滚动页脚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！