聊天框的SignalR聊天溢出
我正在创建一个带有组和私有消息的聊天应用程序，
我想让它更像facebook信使网络应用程序(http://messenger.com)
我遇到的问题是获取组/用户/配置文件/消息的列表以拥有自己的滚动条并在页面末尾停止，与消息页上的聊天框相同
以绿色标出的所有内容都应该有自己的滚动条，而不应将其他对象从页面中扩展或推开。
“用户”页以及“组”和“邮件”页都在页面结束后继续进行，没有出现滚动条。
工具:角UI / SignalR / Bootstrap / ASP.Net MVC 5 C# 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%;
}任何帮助都是非常感谢的！
更新：
环顾四周之后，我发现了CSS高度/宽度的VH和VW属性，我尝试过多次使用不同的组合，但没有结果。我不想设置一个高度/宽度像素，因为它将用于移动和桌面网站-最好不写多个页面。
是否有任何方法可以使用“类似的”百分比来设置父容器的宽度和高度，然后也使用子属性上的百分比。
如果有一种有效的CSS方法来做到这一点，我宁愿这样做，因为我曾经尝试过JavaScript，但这并不是一个很好的解决方案。
谢谢。
回答 3
Stack Overflow用户
发布于 2015-10-07 17:53:46
所以我找到了为什么不起作用的原因。
因为我试图让它成为屏幕的大小，并且使用百分比和使用硬类型的高度，所以它要求每个包装div都有一个高度和/或宽度属性，然后最后一个div (需要滚动)有overflow属性。
<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。
Stack Overflow用户
发布于 2015-08-25 08:47:10
为了使选项卡内容可滚动，需要更改使用 display :块；将其显示为块级元素的显示方式。
内容{显示:块；}
Stack Overflow用户
发布于 2015-09-30 06:20:41
溢出-y:自动；这可能是您正在寻找的。JS示例
$('.add').click(function(){
$("#mylist").append("<li>Test</li>");
$('#mylist').animate({scrollTop: $('#mylist').prop("scrollHeight")}, 500);
});https://stackoverflow.com/questions/32174468
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号