Как реализовать вёрстку чата с закреплённым полем ввода информации?

Question

[Username]

Добрый день, как реализовать чат наподобие вк и веб части Telegram'a? Т.е. нижняя часть куда вводят сообщения зафиксирована, а над ней блок с сообщениями.
Есть идея, как это реализовать через js, но хочется лаконичное решение через css и html.
Вот реализация моей идеи https://jsfiddle.net/perec200/qnxwmmrz/3/
Но прописывать блоку scroll и отлавливать высоту экрана при изменении его через js, как-то не особо идея.

p.s. Как можно изменить скролл у блока?

Answer 1

[Иван]

position: fixed;

Comments

[Username]

Куда вводить информацию я закреплю, а добавление скролла для блока с сообщениями, так же зависит от js'a

[Иван]

Username: зачем? Скролл никуда не денется. Посмотрите внимательно на страницу в VK - скролл стандартный.

[Username]

Иван: чтобы скролл появился нужно явно высоту указывать, которую я не знаю, можно использовать calc(100%-высота ввода) но не кроссбраузерно получается

[Иван]

Username: когда контент не влезет, скролл сам появится. Не надо ничего указывать.

Answer 2

[Alexander]

https://jsfiddle.net/t81bs9os/

p.s. Как можно изменить скролл у блока?

Можно элементарно загуглить.

Comments

[Username]

Вы решаете частный случай для экрана высота которого 350px, но размеры могут быть разные и мне нужно чтобы чат был во всю высоту экрана

[Alexander]

Username: div: height: 70%; text-area: height 30%;

[Username]

Alexander: На маленьком экране терпимо, на большом разнесёт и если на вк посмотреть у них фикса стоит.

[Alexander]

Username: не ужели так сложно ? скорей всего вы плоха знакомы с css. max-height: 400px; height: 100%;

[Alexander]

потом фиксируйте что хотите.