Question

我正在创建一个包含群组和私人消息的聊天应用程序，
我想让它更像facebook Messenger Web应用程序（http://messenger.com）

我遇到的问题是让组/用户/个人资料/消息列表拥有自己的滚动条并停在页面的末尾，与消息页面上的聊天框相同{{3 }}

绿色轮廓的所有内容都应该有自己的滚动条，不应该将其他对象延伸或推离页面

用户页面以及组和消息页面都会在页面末尾继续显示，不会显示滚动条。

工具：Angular UI / SignalR / Bootstrap / ASP.Net MVC 5 C＃w / Razor

HTML：

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

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

CSS：

{{1}}

非常感谢任何帮助！

更新

经过更多的观察后，我发现了VH和VW属性到CSS高度/宽度，我尝试了多次不同的组合，没有任何结果。我不想设置像素的高度/宽度，因为它将在移动和桌面网站上使用 - 最好不要写多个页面。

有没有办法设置父容器的宽度和宽度？使用“类似”百分比的高度，然后使用子属性上的百分比。

如果有一种有效的CSS方式可以做到这一点，我宁愿使用JavaScript，因为我之前尝试过JavaScript，但它并不是太优雅的解决方案。

感谢。

Answer 1

溢出-y：自动; 这可能是你正在寻找的。 JS Example

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

Answer 2

所以我找到了为什么它不起作用的原因。

因为我试图让它成为屏幕大小并使用百分比与使用硬类型高度，它要求每个包装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。

Html SignalR Chat聊天框溢出

2 个答案: