gpt4 book ai didi

android - 由于绝对定位的抽屉,移动键盘会推高内容

转载 作者:搜寻专家 更新时间:2023-11-01 09:35:21 28 4
gpt4 key购买 nike

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

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

点击底部Pop up!切换,你会看到一个 div与一些inputs出现。像往常一样,当您单击其中一个时 inputs在您的移动浏览器中,会显示一个键盘,结果将调整网站的大小。当屏幕上(键盘上方)的输入足够高时,这在我的网站上没有问题。但如果我没有向下滚动那么多,键盘就会弹出到所选的 input 上方。元素,我的整个网站都被推上来了,在我的<html>下创建了一些空白区域内容。即使在我关闭键盘后,那个空白区域仍然存在。

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

情况一:当输入足够高到键盘上方时,没问题。

No Problem when input is above keyboard

情况二:屏幕输入不够高,键盘弹出,网站内容被推高

The websites content is pushed up when input field is under keyboard

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

Blank space persists

经过大量调试后,我找出了导致此问题的原因:我网站上的右侧抽屉(您可以使用 + 符号切换打开的抽屉)以某种方式通过绝对定位导致此问题。这个抽屉的 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(除了它位于左侧),并且不会干扰任何东西。我也很想了解这是怎么可能的。

最佳答案

对于那些难以移动绝对定位元素的 future 读者:

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

出于某种原因,我认为这是默认值,但事实并非如此。因此,如果您对 absolute 定位元素发生奇怪的事情,请确保容器位置已定义(定义为 static 之外的其他内容)

关于android - 由于绝对定位的抽屉,移动键盘会推高内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43702979/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com