jquery - 聊天框的 Html SignalR Chat 溢出

Question

我正在创建一个带有群组和私有(private)消息的聊天应用程序，
我想让它更像 facebook Messenger web 应用程序 ( 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%;
}

非常感谢任何帮助!

更新:

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

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

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

谢谢。

Answer 1

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

内容{ 显示: block ；