Мобильная клавиатура подталкивает контент из -за абсолютно расположенного ящика ⇐ CSS

[Anonymous]

Я делаю веб -сайт с 3 ящиками - элементами, которые абсолютно расположены за пределами экрана, один слева, один справа и один внизу.

Посмотрите на веб -сайт здесь, чтобы увидеть, о чем я говорю
https://sjbuisse.github.io/javascriting/index.html < /p>

Нажмите на нижнее всплывающее окно! Как обычно, когда вы нажимаете на один из этих входов в своем мобильном браузере, отображается клавиатура, которая в результате будет изменять размер веб -сайта. Это не проблема на моем веб -сайте, когда ввод достаточно высоко на экране (над клавиатурой). Но если я не прокручивался так сильно, и клавиатура появляется над выбранным элементом ввода , весь мой веб -сайт нажимается, и некоторое пустое пространство создается под моим Content Полем Даже после того, как я закрываю клавиатуру, это пустое пространство остается там. < /p>

Я покажу вам с скриншотами, что я имею в виду: < /p>

Ситуация 1: Когда ввод Достаточно высоко, чтобы быть выше клавиатуры, нет проблемы.

< /p>

Ситуация 2: Когда ввод недостаточно высок на экране, а клавиатура будет заскочить Это, контент веб -сайтов нажимается вверх < /strong> < /p>



пустое пространство остается на веб -сайте даже после того, как я скрываю клавиатуру < /p>

< /p>

После множества отладки я выделил причину для этого вопроса: Правый ящик на моем веб-сайте (тот, который вы можете переключить с помощью знака +< /code>) как-то вызывает это Проблема, находясь абсолютно позиционированным. CSS для этого ящика выглядит следующим образом: < /p>

.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);
}
< /code>

Просто комментируя позицию: Absolute < /code> строка, проблема исправлена.
может кто-нибудь объяснить мне это? ) и не мешает ничего. Я также хотел бы понять, как это возможно.

Подробнее здесь: https://stackoverflow.com/questions/437 ... ned-drawer