移动键盘上的内容，因为一个绝对定位的抽屉

我正在做一个网站与3个抽屉-元素绝对定位在屏幕的左边一个在右边和一个在底部。

看看这个网站，看看我在说什么

https://sjbuysse。github。io/javascriting/index。html

点击底部弹出！切换后，您将看到一个带有一些输入的div。和往常一样，当你在手机浏览器中点击其中一个输入时，一个键盘就会显示出来，结果将调整网站的大小。这在我的网站上是没有问题的，当输入足够高的屏幕(键盘上方)。但是如果我没有向下滚动那么键盘就会在选中的输入元素上弹出我的整个网站就会被向上推在我的html>内容。即使我关闭了键盘，空白仍然在那里。

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

情况1:当输入足够高到高于键盘时，没有问题。

情况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); 
}

只要简单地注释掉位置:绝对线，问题就解决了。

有人能给我解释一下吗？

此外，左边的抽屉(带有过滤器符号)有完全相同的css(除了它位于左边)，不干扰任何东西。我也很想知道这是怎么做到的。

###为未来的读者，谁挣扎于移动绝对定位的元素:

我通过将父容器(主体)的位置定义为relative来解决这个问题。

由于某些原因，我认为这是默认值，但它不是。

所以如果你和absolute positioned elements make sure the contain定位元素确保容器的位置被定义了(而不是static)

###对于仍然有问题的人:

当虚拟键盘被调用时，任何视口/百分比元素的大小都会改变(Android)。一个修正是获取当前内部窗口高度的大小(px)

然后用它作为元素的高度你想在弹出的键盘上保持不变。

使用jQuery:

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

参考这个SO问题移动键盘改变html视口大小