如何使页脚在文本字段聚焦时上升到移动键盘之上

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>

注（编辑）：如何防止移动键盘覆盖文本字段上方的页脚？不是我的问题。那个问题恰好与我的问题相反，没有提供任何答案或见解来解决我的问题。

- Yang K

---

可能是如何防止移动键盘将页脚遮挡在文本字段上方？的重复问题。 - undefined

@DannyBuonocore 如果我错了，请纠正我，但这恰恰是我所要求的相反的事情，不是吗？ - undefined

Answer 1

现在我通常使用CSS网格来进行布局，它得到了很好的支持，而且制作页眉和页脚的布局也非常简单。你也可以不使用CSS网格来实现这个，主要的事情是记住让你的网站基于100%的高度来设置内容，这样做会压缩内容并将页脚向上移动。

如果你在浏览器上运行下面的代码片段，键盘应该会推起页脚... 在我的安卓手机上测试过了，无论如何都有效...

附注：记得点击“全屏”链接进行测试。

另外，因为我们现在已经创建了一个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>

- Keith

Answer 2

不要使用position: fixed，尝试使用position: absolute代替。在移动浏览器上使用固定定位时会出现许多问题。

- brianespinosa