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

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

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

Answer 2

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

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

пс. Не забудьте нажать на Full page ссылка на тест

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

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>