请在此处查看演示:http : //puu.sh/3YwRt.png
JSFiddle:http : //jsfiddle.net/elvista/7LBcr/2/
我正在尝试在侧边栏中进行一个Outlook.com之类的聊天。
我设法对来自Outlook.com的一些代码进行了反向工程,并创建了一个类似于它的聊天窗口。但是,我有一个网站没有的限制。我不知道#chathistory的确切最高价值,因为我可能在#chathistory顶部放置了一个或多个高度可变的.widget。
本质上,我有以下代码:
#chathistory {
overflow-y: auto;
bottom: 60px;
top: 70px;
position: absolute;
}
我需要它在没有top:value的情况下运行。
可以使用CSS完成,还是需要jQuery?如果后者可以为我提供一些指导,因为我的jQuery技能充其量是最低限度的?谢谢。
此解决方案需要jQuery,但允许您保留所有其他CSS不变,并".widgets"
在侧边栏中添加尽可能多的其他CSS 。勘误表:您必须在CSS代码中删除top
样式#chathistory
,如小提琴所示。
var otherWidgets = $('#sidebar').find('.widget').not('#chatbar');
var maxBtm = 0;
$.each(otherWidgets, function (k, v) {
var offset = $(this).offset();
var thisBtm = offset.top + $(this).height();
if (thisBtm > maxBtm) {
maxBtm = thisBtm;
alert(maxBtm); // of course, remove this as you see fit
}
});
$('#chatbar').css('top', maxBtm + 1);
$('#chathistory').css('top', maxBtm + 32); // aha - add this line, as well!!
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句