HTML SignalR Chat聊天框溢出
[英]Html SignalR Chat overflow of chat box
問題描述
我正在使用群組和私人消息創建聊天應用程序，
我想使其更像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%;
}
任何幫助深表感謝！
更新：
在環顧四周之后，我發現VH和VW屬性達到CSS高度/寬度，我嘗試了多次使用不同的組合，但結果一無所獲。 我不想以像素為單位設置高度/寬度，因為它將同時在移動和台式機網站上使用-最好不要編寫多個頁面。
有沒有辦法使用“類似”百分比來設置父容器的寬度和高度，然后在子屬性上也使用百分比。
如果有一種有效的CSS方式可以做到這一點，那么我寧願選擇JavaScript也不願使用JavaScript，因為我之前曾經嘗試過使用JavaScript，但是這種解決方案不太好用。
謝謝。
3 個解決方案
解決方案1
0 2015-08-25 08:47:10
Alec，為了使標簽內容可滾動，您需要使用display：block ;更改其顯示方式。 將其顯示為塊級元素。
內容{display：塊; }
解決方案2
0 2015-09-30 06:20:41
溢出-y：自動 ; 這可能是您要尋找的。 JS示例
$('.add').click(function(){
$("#mylist").append("<li>Test</li>");
$('#mylist').animate({scrollTop: $('#mylist').prop("scrollHeight")}, 500);
});
解決方案3
0 已采納 2015-10-07 17:53:46
因此，我找到了為什么它不起作用的原因。
因為我試圖將其設置為屏幕的大小，並使用百分比與使用硬類型的高度，所以它要求每個包裝div都具有一個height和/或width屬性，然后是最后一個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。
SignalR聊天未連接到集線器？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.