Требуется сверстать интерфейс чата, который представляет собой окно разделённое на 4 области: шапка с фиксированной высотой 50 пикселей, подвал с фиксированной высотой 100 пикселей, левая панель с фиксированной шириной 200 пикселей, правая панель. Чат занимает 100% ширины и 100% высоты окна, внутри чат делится на зоны как на картинке. Шапка (1) предназначена для элементов управления и имеет фиксированную высоту, подвал (4) предназначен для ввода текста и имеет фиксированную высоту, левая панель (2) предназначена для вывода списка участников чата и может иметь внутреннюю прокрутку, правая панель (3) предназначена для отображения сообщений в чате и может иметь внутреннюю прокрутку.
Для демонстрации работоспособности вёрстки нужно в левую (2) и правую (3) панель вставить достаточно контента, чтобы появилась полоса прокрутки. Проследить за тем, чтобы не появилась общая полоса прокрутки для всего чата, проследить за тем, чтобы подвал и шапка занимали строго фиксированную высоту. Контент внутри четырёх зон выравнивается по левому краю и прижимается к верху контейнера.
В более сложном варианте сделать так, чтобы шапка и подвал могли растягиваться под контент (т.е. есть только min-height), а центральная часть это учитывала.
Код CSS должен быть необходимым и достаточным (не содержать лишних сущностей), разметка кода и комментарии имеют значение.