Как корректно сверстать страницу чата на мобильной версии?

Question

Не могу понять как правильно сверстать страницу чата для мобильной версии Где сверху хедер, посередине сама переписка и снизу закрепленный инпут Оно как бы вроде просто звучит, но на деле инпут снизу может увеличиваться если ввести много текста, до определенной высоты И соответственно уже отправленные сообщения выше при увеличении инпута также должны подниматься (то есть просто position: fixed не покатит) И само собой при нажатии на инпут с телефона у нас вылезает клавиатура, то есть инпут должен быть в зоне видимости (над клавиатурой)

То что имеется: https://codesandbox.io/s/silly-pine-gtuwf На телефоне футер не показывается:

PS Из рабочих примеров того что мне нужно нашел только vk. В мобильной версии vk сделано именно так как мне нужно, но не ясно как.

Answer 1

<div class="container">
  <div class="header"></div>
  <div class="content">
    <div class="scroll">
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  </div>
  <div class="footer"></div>
</div>

.container {
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.header {
  background-color: blue;
  min-height: 30px;
}

.content {
  flex-grow: 1;
  position: relative;
}

.scroll {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.footer {
  background-color: red;
  min-height: 30px;
}

Answer 2

Попробуйте так. Чтобы на грид не переделывать, на флексе кое что добавить можно. В .chat добавил justify-content: space-between; В .chat__content добавил flex: 1 1 auto; Вместо textarea сделал div c атрибутом contenteditable. https://jsfiddle.net/sqxgphLj/

БЛОГ НА HUSL

Как корректно сверстать страницу чата на мобильной версии?

Ответы (2 шт):