Как заставить нижний колонтитул подниматься над мобильной клавиатурой при фокусировке на текстовых полях

Question

Мне нужна помощь с размещением нижнего колонтитула для мобильных устройств на веб-странице.В настоящее время у меня есть фиксированный нижний колонтитул в нижней части HTML-страницы.Однако, когда я пытаюсь сфокусироваться на поле ввода в мобильном телефоне, клавиатура открывается, и нижний колонтитул скрывается под клавиатурой.Как сделать так, чтобы нижний колонтитул всегда располагался над клавиатурой, а не под ней?Вот CSS, который у меня сейчас есть.

.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    white-space: nowrap;
    width: 100%;
    color: black;
    background-color: white;
    border-top: 2px solid green;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 5px;
    height: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
}

<!--Footer needs to be over the keyboard in mobile devices when the input gains focus-->
<input type="text" placeholder="Footer over Keyboard">

<div class="footer">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

ПРИМЕЧАНИЕ (РЕДАКТИРОВАТЬ): Как не допустить, чтобы мобильная клавиатура поднимала нижний колонтитул над текстовыми полями? - не мой вопрос.Этот вопрос является полной противоположностью моего вопроса и не дает ответов или понимания того, как моя проблема может быть решена.

Answer 1

В настоящее время я обычно использую CSS-сетки для макета, это хорошо поддерживается, а делать макеты нижнего колонтитула легко и просто.Вы также можете сделать это без CSS-сеток. Главное, что нужно помнить, это сделать ваш веб-сайт основанным на 100% -ной высоте контента, тогда это приведет к сжатию контента и, таким образом, переместит нижний колонтитул вверх.

Если вы запуститеВ приведенном ниже фрагменте кода в вашем браузере клавиатура должна выдвинуть нижний колонтитул. Протестировано на моем телефоне Android и работает в любом случае.

ps.Не забудьте нажать на ссылку Full page, чтобы проверить.

Кроме того, поскольку теперь мы создали страницу высотой 100%, вы также можете установить overflow: auto для содержимого / контейнера содержимого, чтобы вы могли прокручиватьсодержимое сайта.

body {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 display: grid;
 position: absolute;
 top: 0;
 bottom: 0;
 width: 100%;
 grid-template-rows: 1fr min-content;
}

<div>
  This is some content.
  <input/>
</div>
<div>
  This is the footer
</div>

Answer 2

Вместо использования position: fixed, попробуйте использовать position: absolute вместо.При использовании фиксированного позиционирования в мобильных браузерах возникает ряд проблем.