Я создаю чат-приложение с групповыми и личными сообщениями,
Я хотел сделать это очень похоже на веб-приложение facebook Messenger (http://messenger.com)
Проблема, с которой я сталкиваюсь, заключается в том, чтобы получить список групп/пользователей/профилей/сообщений, чтобы иметь собственную полосу прокрутки и останавливаться в конце страницы, то же самое с полем чата на странице сообщений
Все, что обозначено зеленым цветом, должно иметь собственную полосу прокрутки и не должно растягивать или удалять другие объекты со страницы
Страница пользователей, а также группа и страница сообщений все продолжаются в конце страницы без появления полосы прокрутки.
Инструменты: Угловой интерфейс /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, но он не был слишком изящным решением.
Благодарю.
Поэтому я нашел причину, почему это не работает.
Поскольку я пытаюсь получить размер экрана и использовать проценты против жестких типизированных высот, для этого требуется, чтобы каждый обертывающий 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.
overflow-y: auto; Это может быть то, что вы ищете. Пример JS
$('.add').click(function(){
$("#mylist").append("<li>Test</li>");
$('#mylist').animate({scrollTop: $('#mylist').prop("scrollHeight")}, 500);
});
Alec. Чтобы прокрутить содержимое вкладки, вам нужно изменить способ отображения с помощью display: block; чтобы отобразить это как элемент уровня блока.
content {display: block; } }