Question

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

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

点击底部Pop up!切换，您会看到显示div的{{1}}。像往常一样，当您在移动浏览器中单击其中一个inputs时，会显示一个键盘，结果将调整网站的大小。当屏幕上的输入足够高（键盘上方）时，我的网站上没有问题。但是，如果我没有向下滚动，并且键盘弹出选定的inputs元素上方，我的整个网站都会被推高，并且在我的input内容下会创建一些空白区域。即使我关闭键盘后，那个空白区域也会停留在那里。

我会用截图向您展示我的意思：

情况1：当输入高到键盘上方时，没问题。

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

即使在我隐藏键盘后，空白区仍保留在网站中

经过大量的调试后，我挑出了这个问题的原因：我的网站上的右侧抽屉（可以用<html>标志切换的那个）以某种方式导致了这个问题绝对。这个抽屉的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（除了它位于左侧），并且不会干扰任何内容。我也很想知道这是怎么回事。

Answer 1

对于那些努力移动绝对定位元素的未来读者：

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

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

Answer 2

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

使用jQuery：

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

请参阅此特殊问题Mobile keyboard changes html viewport size

由于抽屉绝对定位，移动键盘会推动内容

2 个答案: