Html SignalR Переполнение чата в окне чата

0

Я создаю чат-приложение с групповыми и личными сообщениями,
Я хотел сделать это очень похоже на веб-приложение facebook Messenger (http://messenger.com)

Проблема, с которой я сталкиваюсь, заключается в том, чтобы получить список групп/пользователей/профилей/сообщений, чтобы иметь собственную полосу прокрутки и останавливаться в конце страницы, то же самое с полем чата на странице сообщений Изображение 174551

Все, что обозначено зеленым цветом, должно иметь собственную полосу прокрутки и не должно растягивать или удалять другие объекты со страницы

Страница пользователей, а также группа и страница сообщений все продолжаются в конце страницы без появления полосы прокрутки.

Инструменты: Угловой интерфейс /SignalR/Bootstrap/ASP.Net MVC 5 С# w/Razor

HTML:

<div class="wrapper">
<div class="row">
<div class="col-sm-4">
    <tabset>
        <tab>
           <tab-heading>Profile</tab-heading>
           <!--Content of tab goes here-->
        </tab>
        <tab>
            <tab-heading>Users</tab-heading>
            <div class="content">
                 <a ng-repeat="user in users">
                     <user-item profile="user"></user-item>
                 </a>
            </div>
        </tab>
    </tabset>
</div>
<div class="col-sm-8">
    <div class="chat-box">
        <a ng-repeat="message in messages">
            <message-item message="message"></message-item>
        </a>
    </div>
</div>
</div>
</div>

CSS:

.content{
     height: 100%;
     width:100%;
     overflow-x: hidden;
     overflow-y: auto;
}

.wrapper{
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
}

Любая помощь высоко ценится!

Обновить:

После того, как я огляделся, я наткнулся на атрибуты VH и VW на высоты/ширину CSS, я несколько раз пытался использовать разные комбинации, и из этого ничего не вышло. Я не хочу устанавливать высоту/ширину в пикселях, потому что она будет использоваться как на мобильных, так и на рабочих местах - желательно без написания нескольких страниц.

Есть ли способ установить ширину и высоту родительских контейнеров, используя проценты "что-то вроде", а затем использовать проценты для дочерних атрибутов.

Если есть допустимый способ CSS для этого, я бы предпочел, чтобы над JavaScript, как я уже пробовал JavaScript, но он не был слишком изящным решением.

Благодарю.

Теги:
overflow

3 ответа

0
Лучший ответ

Поэтому я нашел причину, почему это не работает.

Поскольку я пытаюсь получить размер экрана и использовать проценты против жестких типизированных высот, для этого требуется, чтобы каждый обертывающий div имел атрибут высоты и/или ширины, затем последний div (который должен быть scroll able) имеет атрибут overflow-y.

<body style="height:100%;width:100%;">
     <div style="height:100%;">
         <ul style="height:100%; overflow-y: auto;">
              <li ng-repeat="user in users">
                  <user-display user="user"></user-display>
              </li>
         </ul>
     </div>
</body>

Это базовый пример того, что сработало для меня, у меня всего лишь тонна более сложных div.

0

overflow-y: auto; Это может быть то, что вы ищете. Пример JS

$('.add').click(function(){    
  $("#mylist").append("<li>Test</li>");
  $('#mylist').animate({scrollTop: $('#mylist').prop("scrollHeight")}, 500);
});
  • 1
    Пожалуйста, исправьте форматирование кода.
  • 0
    Я вижу, как я могу реализовать это таким образом, чтобы это работало, но на самом деле это не решает вопрос ... Вы видите, что переполнение-у не работает при установке его на авто или на прокрутку, плюс я пользуюсь угловым списком.
0

Alec. Чтобы прокрутить содержимое вкладки, вам нужно изменить способ отображения с помощью display: block; чтобы отобразить это как элемент уровня блока.

content {display: block; } }

  • 0
    Добавление отображения: Блок ничего не сделал, чтобы сделать контент прокручиваемым. Может я не так делаю? Я применил его к контентному классу CSS, но этот вывод был таким же, как и раньше.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню