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

【问题标题】：How to make footer rise above the mobile keyboard when focusing on text fields关注文本字段时如何使页脚高于移动键盘
【发布时间】：2019-03-13 14:33:41
【问题描述】：

我需要有关在网页中放置移动设备的页脚方面的帮助。目前，我在 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? 不是我的问题。这个问题与我的问题完全相反，没有提供答案或洞察如何解决我的问题。

【问题讨论】：

How to prevent mobile keyboard from rising footer over the text fields?的可能重复
@DannyBuonocore 如果我错了，请纠正我，但这与我问的完全相反，不是吗？

标签： javascript html css footer

【解决方案1】：

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

【讨论】：

【解决方案2】：

我现在通常使用 CSS 网格进行布局，它得到了很好的支持，并且页眉页脚布局既好又简单。您也可以在没有 CSS 网格的情况下执行此操作，要记住的主要事情是让您的网站成为 100% 基于高度的内容，这样做会挤压内容并在这样做时将页脚向上移动。

如果你在浏览器上运行下面的 sn-p，键盘应该会向上推页脚，.. 在我的 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>

【讨论】：