Клавиатура с нижнего ввода выталкивает абсолютный заголовок в React

#javascript #html #css #reactjs #single-page-application

Вопрос:

У меня есть фиксированный заголовок для чата и ввода внизу (аналогично макету Messanger или почти любому приложению для чата), однако заголовок исчезает из поля зрения, когда появляется клавиатура. Вот код для макета. Ожидаемое поведение состоит в том, чтобы он оставался на ногах.

 .Content{
  height: 100%;
  width: 100%;
  position: relative;
  }

.Header{
      position:absolute;
      top:0;
  }
      
 

Чат и другие контейнеры-это просто обычные дивы с относительными позициями. Я пытался:

  1. Добавление отступа в заголовок при фокусировке и удаление на bur (движение скольжения слишком раздражает) — если у кого-то есть способ сделать его неподвижным (потому что переход от отступа слишком заметен).
  2. Делая заголовок фиксированным изначально и абсолютным, когда он находится в фокусе (заголовок вообще не возвращается в поле зрения)
  3. Использование сеток для выделения места для заголовка и контейнера и т.д.

Ничего не сработало, ниже приведены некоторые скриншоты

клавиатура выталкивает изображение