.chat

Тут колоссальная куча проблем и неудобств. Самая внешняя проблема - это скроллбар. Во-первых мы не можем использовать тот скроллбар в .page__column который мы используем во всех остальных сайдбарах и поповерах. Не можем потому что тут есть шапка с собеседником и поле отправки, которые не скроллируются. По-этой причине, конкретно в поповере чата убираем класс .page__column_scroll, ну и .scroll, .scroll_skin_default тоже убираем. У чата будет свой скролл!

Дальше мы хотим, чтобы скролл чата был таким же как и все остальные: на всю высоту поповера. И начинаются проблемы со структурой. Первым делом выводим тело чата .chat__body: http://prntscr.com/bnu2bs. Выводим так, чтобы от самого верху до самого низу. И снабжаем скроллбаром.

Затем мы воводим все остально: шапку .chat__head и подвал .chat__foot. По коду они должны идти ниже тела чата. Они позиционируются абсолютно и как бы бросаются поверх тела чата. Оба этих элемента обладают фоном идентичным поповеру и, соответствено, верх и низ чата они закрывают.

Теперь нужно вернуться к телу чата и забраться внутрь, найти ленту .chat__ribbon и в нее дофигачить отступов сверху и снизу, чтобы компенсировать перекрытое. Сверху все понятно, замеряем шапку: http://prntscr.com/bnu3m8 и простовляем соответствующий верхний паддинг в ленту: http://prntscr.com/bnu3yh

Снизу сложнее. Там должна быть синхронизированна вот эта горизонталь: http://prntscr.com/bnu4cs, а она скачет от медиа-запросов в шапке. По-момо этой горизонтали нужно еще и взять высоту подвала чата с полем и кнопкой: http://prntscr.com/bnu4ov.

Че придумал. Первую часть компенсируем прозрачным бордюром, вторую паддингом. Идем в шапку, забираем ее медиазапросы, дублируем их и в ленту чата и в подвал чата: http://prntscr.com/bnu5lg, http://prntscr.com/bnu5dq. Крутя, с шапкой синхронизировались. Там есть разница в 5px чтобы все вот эти полоски совпали: http://prntscr.com/bnu5y0, но это мелкие версточные заморочки.

Вторая часть, идем в подвал, замеряем его высоту (уже без бордюра, он учтен): http://prntscr.com/bnu6di и проставляем как нижний паддинг в ленту: http://prntscr.com/bnu6tb

Фишка в том, что поле ввода может меняться по высоте, скажем от 3 до 6 строк. Когда это происходит нужно пересчитывать нижние отступы в ленте. Так вот с такой структурой эти обсчеты нужно делать только при изменении высоты поля. Если бы мы не разделили на паддинги и бордюры, то пришлось бы пересчитывать еще и при изменении размеров окна.