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

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>

注意（编辑）：如何防止移动键盘在文本字段上方上升页脚？不是我的问题。这个问题与我的问题完全相反，没有提供答案或深入了解如何解决我的问题。

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>

Answer 3

给你的模态高度高度：100svh（小视口高度）并按以下方式构造它： 给你的页脚边距顶部自动，你的页眉和正文元素应该是flex-grow