Question

我需要一些有关网页中移动设备的页脚放置的帮助。目前，我在HTML页面的底部有一个固定的页脚。但是，当我尝试着眼于移动设备中的输入框时，键盘会打开，并且页脚会隐藏在键盘下方。如何确保页脚始终放在键盘上方而不是键盘下方？这是我目前拥有的CSS。

.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    white-space: nowrap;
    width: 100%;
    color: black;
    background-color: white;
    border-top: 2px solid green;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 5px;
    height: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
}

<!--Footer needs to be over the keyboard in mobile devices when the input gains focus-->
<input type="text" placeholder="Footer over Keyboard">

<div class="footer">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

注意（编辑）：How to prevent mobile keyboard from rising footer over the text fields?不是我的问题。该问题与我的问题完全相反，没有提供任何答案或见解，无法解决我的问题。

Answer 1

请尝试使用position: fixed，而不要使用position: absolute。使用固定定位时，移动浏览器中存在许多问题。

Answer 2

我现在通常使用CSS网格进行布局，它得到了很好的支持，并且进行页眉页脚布局非常简单。您也可以在没有CSS网格的情况下执行此操作，主要要记住的是将您的网站设置为基于高度100％的内容，然后将其压缩，然后将页脚向上移动。

如果在浏览器上运行以下代码段，则键盘应将页脚向上推，..在我的Android手机上进行了测试，并且仍然可以正常工作。.

ps。请记住点击Full page链接进行测试。

另外，由于我们现在已经制作了100％高的页面，因此您可能还希望在内容div /容器上设置overflow: auto，以便仍可以滚动网站内容。

body {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 display: grid;
 position: absolute;
 top: 0;
 bottom: 0;
 width: 100%;
 grid-template-rows: 1fr min-content;
}

<div>
  This is some content.
  <input/>
</div>
<div>
  This is the footer
</div>

在关注文本字段时如何使页脚高于移动键盘

2 个答案: