Html SignalR Chat 聊天框溢出

Question

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

我运行遇到的问题是让组/用户/个人资料/消息列表拥有自己的滚动条并停在页面末尾，与聊天框一样消息页面

以绿色勾勒出的所有内容都应该有自己的滚动条，并且不应将其他对象延伸或推离页面

用户页面以及群组和消息页面都继续到页面末尾，没有出现滚动条。

工具：Angular 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%;
}

非常感谢任何帮助！

更新：

环顾四周后，我发现 VH 和 VW 属性为 CSS 高度/宽度，我尝试了多次不同的组合，但没有任何结果。我不想以像素为单位设置高度/宽度，因为它会同时用于移动和桌面网站 - 最好不要写多个页面。

有没有办法使用 "something like" 百分比设置父容器的宽度和高度，然后在子属性上也使用百分比。

如果有一个有效的 CSS 方法来做到这一点，我更喜欢 JavaScript 因为我之前尝试过 JavaScript 但它不是太优雅的解决方案.

谢谢。

Answer 1

亚力克，为了使选项卡内容可滚动，您需要使用 display: block; 更改其显示方式。将其显示为块级元素。

内容{ 显示：块； }

Answer 2

溢出-y：自动；这可能就是您要找的。 JS Example

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

Answer 3

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

因为我试图让它成为屏幕的大小并使用百分比与使用硬输入高度，它要求每个包装 div 都有一个高度 and/or 宽度属性来它，然后最后一个 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>

这是一个对我有用的基本示例，我的只是堆积了很多 divs。

Html SignalR Chat 聊天框溢出

Html SignalR Chat overflow of chat box

html

css

jquery

overflow

angularjs