Как сверстать страницу аля диалог Вконтакте ?

Question

[Lorem Ipsum]

Всем доброго времени суток !
Как сверстать страницу как страница диалога Вконтакте ?
Все элементы фиксированные кроме списка сообщений (хидер, сайдбар, форма отправки) ?
Я смог зафиксировать хидер, сайдбар, форму. Что делать со списком сообщений - не пойму. Уже часа 2 головую ломаю
Подскажите пожалуйста.

Answer 1

[Сергей Протько]

Инспектор элементов для кого придумали?

Весь UI у вконтактика фиксированный, к подложке с чатом добавляется паддинг с верху и снизу (это позволяет эмитировать поведение, при котором скролится не блок отдельный а вся страница). Ну... и все. Своего рода вьюпорт для контента, обертка.

Answer 2

[Максим Гречушников]

список это обычный див. overflow: scroll-y;height:200px; туда яваскриптом записывать тексты.

Comments

[Сергей Протько]

Не совсем так, там чуточку сложнее.

[Lorem Ipsum]

overflow:scroll добавил бы скролл к самому списку, а скрола у списка в вк нету, он у body

[Сергей Протько]

@GeorgeGeorge там магия с паддингами работает и все.

[Максим Гречушников]

можно сделать как в вк через, м.б. паддинги. а можно сделать див со скроллом и его скролить.

[Сергей Протько]

@maxyc_webber можно, не сильно проще и огромный минус для user expirience.

[Lorem Ipsum]

@Fesor то есть при скролле вверх и вниз надо прибавлять/убавлять padding'и ?

[Сергей Протько]

@GeorgeGeorge нет...

Короче у вас есть блок с дыркой грубо говоря, который фиксирован относительно вьюпорта и занимает 100%x100% от его размера. В этом вот оверлее менюшки, контролы и т.д. А область с контентом, просто блок под высоту контента + паддинги сверху и синзу под размеры дырки (что бы "низ" блока влазил и "верх" тоже). И все. В итоге у вас скролится страница (блок с контентом), а оверлей с контролами остается на месте.

[Lorem Ipsum]

@Fesor вот что получилось - smart-developers.sytes.net/smChat

[Сергей Протько]

@GeorgeGeorge добавьте блоку с контентом паддинг снизу в высоту chatBox (или как оно у вас там называется, короче 120 пикселей который).

[Lorem Ipsum]

@Fesor понял!) спасибо большое за ответ!)