CSS-让div填充剩余的垂直空间

埃尔维斯塔

请在此处查看演示: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技能充其量是最低限度的?谢谢。

DevlshOne

jsFiddle演示

此解决方案需要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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章