由于绝对定位的抽屉，移动键盘可将内容向上推答案

【问题标题】：Mobile keyboard pushes up content because of an absolutely positioned drawer由于绝对定位的抽屉，移动键盘可将内容向上推
【发布时间】：2021-11-12 20:00:05
【问题描述】：

我正在制作一个有 3 个抽屉的网站 - 元素绝对位于屏幕外，一个在左侧，一个在右侧，一个在底部。

看看这里的网站，看看我在说什么 https://sjbuysse.github.io/javascriting/index.html

单击底部的Pop up! 切换按钮，您会看到div 和一些inputs 出现。像往常一样，当您在移动浏览器中单击其中一个inputs 时，会显示一个键盘，从而调整网站的大小。当屏幕上的输入足够高（键盘上方）时，这在我的网站上没有问题。但是如果我没有向下滚动太多，并且键盘在选定的input 元素上方弹出，我的整个网站都被向上推，并且在我的<html> 内容下创建了一些空白空间。即使在我关闭键盘之后，那个空白区域仍然存在。

我会用截图告诉你我的意思：

情况一：当输入高到可以超过键盘的时候，没问题。

情况2：屏幕输入不够高，键盘会弹出，网站内容被推上去

即使我隐藏了键盘，网站中的空白仍然存在

经过大量调试后，我找出了导致此问题的原因：我网站上的右侧抽屉（您可以使用+ 符号打开的那个）以某种方式通过绝对定位导致了此问题。这个抽屉的 css 如下所示：

.create-drawer {
  height: 100vh;
  text-align: left;
  color: #EEE;
  width: 200px;
  background-color: #1C262F;
  position: absolute;
  top: 0;
  transition: transform 0.3s ease-out;
  z-index: 2;
  box-sizing: border-box;
  right: 0;
  transform: translate(200px, 0); 
}

只需注释掉position: absolute 行，问题就解决了。谁能给我解释一下？

此外，左侧抽屉（带有过滤器符号）具有完全相同的 css（除了它位于左侧），并且不会干扰任何东西。我也很想了解这是怎么可能的。

【问题讨论】：

标签： android html css

【解决方案1】：

对于难以移动绝对定位元素的未来读者：

我通过将父容器（body）的position 定义为relative 解决了这个问题。

出于某种原因，我认为这是默认值，但事实并非如此。因此，如果absolute 定位元素发生了奇怪的事情，请确保定义了容器位置（除了static）

【讨论】：

苦苦挣扎一周后，这个解决方案帮了我。谢谢。

【解决方案2】：

对于任何对此仍有疑问的人：当调用虚拟键盘时（Android），任何基于视口/百分比元素的大小都会发生变化。一种解决方法是获取当前内部窗口高度的大小（以 px 为单位）然后将其用作要在键盘弹出窗口中保持不变的元素的高度。

使用 jQuery：

$(document).ready(function() {
    /* ... */
    var windowHeight = $(window).innerHeight();
    $('body').css({'height':windowHeight});
    /* ... */
});

参考这个 SO 问题Mobile keyboard changes html viewport size

【讨论】：