CSS. Как сделать адаптивность блока по вертикали?

Question

[TechNOIR]

В шаблоне чата присутствуют блоки:
- chat-box (включает в себя шапку (chat-head) и общасть сообщений с скролом (converse))
- contols - область ввода текста

При увеличении/уменьшении страницы блок converse вместе с скролом сьезжает. Можно ли его как закрепить на месте?
При этом шапка и блок ввода остаются неизменными при увеличении/уменьшении страницы
Пример такой реализации есть, но чтото не могу никак воплотить

Есть идеи товарищи? Спасибо заранее

Answer 1

[kulaeff]

Это происходит потому, что блок #converse имеет высоту в процентах, а блок #controls - абсолютное позиционирование и прикреплен к низу, поэтому при увеличении #controls он начинает перекрывать #converse, а при уменьшении, наоборот, разрыв. Как идея - убрать у #controls абсолютное позиционирование и засунуть его в #chat-box, затем сверстать #chat-box с помощью флексов.

Comments

[TechNOIR]

Спасибо Вам добрый человек за наставление на путь истинный)
У controls убрал absolute. Занём в chat-box.
И на chat-box повесил:

display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;

[TechNOIR]

kulaeff Вопрос только маленький еще) Как это регулировать на других разрешениях правильно?
На некоторых нормально работает, на некоторых уезжает
www.responsinator.com/?url=cht.ignn.ru

[kulaeff]

По ссылке я вижу, что у #controls по прежнему абсолютное позиционирование. И у #convers надо убрать height и прописать flex: 1.