Как сверстать страницу с плавающим блоком как в диалогах вконтакте?

Question

[v-orlov]

пригодилась бы помощь с идеей как сверстать страницу диалогов как в вк - точнее интересует, как сделать, чтобы блок с перепиской скролился, а нижняя часть, куда пользователь вписывает текст, плавала. js хитрый? или только css? как?

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


благодарен за любые подсказки

Answer 1

[Мари Арти]

1. меню, хэдер и вспомогательный блок сделайте фиксированными. весь контент сначала в какой-то общий контейнер поместите.
2. блок с диалогом сделать самый обычный 100% высоты (сначала), так контент будет скроллиться.
3. далее сделать общий резиновый по высоте контейнер, который будет просто прижат к низу экрана и будет тянуться. офк он должен будет закрывать текст диалога, поэтому фон ему дать можно #fff. а чтобы он тянулся можно использовать пресловутый https://jqueryui.com/resizable/ , поковырять в настройках, чтобы сделать возможность тянуть блок только за верхнюю сторону, в роде того:

$(function() {
    $( "#resizable" ).resizable({
      handles: 'n'
   });
});

4. а вот потом внутрь этого тянущегося блока помещаем форму для набора текста, который позиционируем относительно верха #resizable-block.
5. можно еще позаботиться о минимальной высоте резинового блока, чтобы он не оказывался меньше формы для текста. а также стоит учесть, что сами диалоги у нас до сих пор 100% высоты экрана занимают. поэтому для них нужно рассчитать margin-bottom, который будет равен - 100% высоты минус высота #resizable-block в данный момент.

по вашему скрину накидала позиции блоков:


надеюсь, будет полезно

Comments

[v-orlov]

Спасибо Вам ! очень доходчиво, и все получилось ) Вам курсы для новичков вести нужно )

Answer 2

[Dark Hole]

Вас магнит интересует? Или возможность двигать мышкой?
Магнит - обычный CSS. Вот приблизительно так:

...position: absolute;/*можно fixed*/
bottom: 0;...

Двиганье мышью - JS. Тут сложнее, но...

handler.onmousedown = function(){
  handler.onmousemove = function(){
    //Обработка перетаскивания
  };
};
handler.onmouseup = function(){
  delete handler.onmousemove;
};

Comments

[v-orlov]

инспектор кода показывает страшные вещи с жуткой вложенностью, и разобраться в них не получается, а интересует сам нижний блок, с помощью каких плагинов он двигается. drag&drop? вроде нет. если я правильно понимаю, нижняя часть находится внутри белого блока, который ресайзится (тоже плагин?), а сам textarea просто приклеен к его верху

[Dark Hole]

v-orlov: обычный JS, я же привел код.

[Dark Hole]

v-orlov: можно jQuery'ским Drag'n'Drop'ом

[Dark Hole]

v-orlov: codepen.io/DarkHole/pen/jqqpVX?editors=0011 я не так понял вопрос, однако пример довольно понятно иллюстрирует, как это работает

[v-orlov]

Dark Hole: спасибо за идею, попробую )