移动键盘由于绝对定位的抽屉而向上推内容

Question

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

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

单击底部的

Pop up!

开关，您会看到一个

div

和一些

inputs

出现。像往常一样，当您在移动浏览器中单击其中一个

inputs

时，会显示一个键盘，从而调整网站大小。当屏幕上的输入足够高（键盘上方）时，这在我的网站上没有问题。但是，如果我没有向下滚动那么多，键盘会在所选的

input

元素上方弹出，我的整个网站就会被向上推，并在我的

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

只需注释掉

position: absolute

行，问题就得到解决。有人可以向我解释一下吗？

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

Answer 1

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

我通过将父容器（

position

）的

body

定义为

relative

解决了这个问题。

出于某种原因，我认为这是默认值，但事实并非如此。因此，如果

absolute

定位元素发生奇怪的事情，请确保定义了容器位置（除

static

以外的其他位置）

Answer 2

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

使用 jQuery：

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

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

Answer 3

如果您的输入形式是模态形式，请尝试输入

.modal{overflow-y: visible;}

Answer 4

这是一个简单的修复，我可以使用 JavaScript 在我的代码中实现，以修复当键盘打开以及设置元素样式的 height 属性的任何变化时元素调整为移动设备上的屏幕尺寸的问题对于响应能力，例如。 vh 或 %。

const elem = document.querySelector('.some-div);

const getPixels = (percentage) => {
  const screenHeight = window.innerHeight;
  return (screenHeight / 100) * percentage;
};

elem.style.minHeight = `${getPixels(75)}px`;

这行简单的代码在 JavaScript 中动态设置元素的高度。这项工作之所以有效，是因为现在您设置的是动态和固定的高度。当您通过

getPixels

函数设置元素的高度时，您将传入您希望 div 高度达到的百分比。就我而言，我希望它是窗口对象高度的 75%，然后将其转换为固定高度的像素。它是动态的原因是因为该函数首先获取设备的高度（无论是什么），然后根据屏幕尺寸将百分比转换为固定高度（以像素为单位）。希望这对那些在用尽此处列出的所有其他解决方案（例如我自己）后仍然遇到问题的人有所帮助！哈哈。

移动键盘由于绝对定位的抽屉而向上推内容

问题描述投票：0回答：4

4个回答

最新问题

移动键盘由于绝对定位的抽屉而向上推内容

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4