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

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% 基于高度的内容，这样做会挤压内容，从而向上移动页脚。

如果您在浏览器上运行以下代码片段，键盘应向上推页脚,..在我的安卓手机上测试过，无论如何都可以工作..

附言。 请记住单击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>