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

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

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

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

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

Инструменты: Угловая UI/SignalR/Bootstrap/ASP.Net MVC 5 C# ж/Бритвы

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%; 
}

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

Update:

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

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

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

Спасибо.

источник

2015-08-24 Alec Scratch

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

Поскольку я пытаюсь получить размер экрана и использовать проценты против жестких типизированных высот, для этого требуется, чтобы каждый обертывающий div имел атрибут высоты и/или ширины, а затем последний div (который должен иметь возможность прокрутки) имеет атрибут 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.

источник

2015-10-07 17:53:46

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

содержание {дисплей: блок; }

источник

2015-08-25 08:47:10

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

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

$('.add').click(function(){  
    $("#mylist").append("<li>Test</li>"); 
    $('#mylist').animate({scrollTop: $('#mylist').prop("scrollHeight")}, 500); 
});

источник

2015-09-30 06:20:41

Исправьте форматирование кода. –

Я могу видеть, как я могу реализовать это так, как для него работать, но на самом деле это не затрагивает вопрос ... Вы видите, что переполнение-y не работает при настройке на авто или для прокрутки, плюс Я использую угловое для населения списка. –

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

ответ

Смежные вопросы