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

Question

请在此处查看演示:http://puu.sh/3YwRt.png

JSFiddle:http://jsfiddle.net/elvista/7LBcr/2/

我正在尝试在侧边栏中创建一个类似于聊天的 outlook.com。

我设法对 outlook.com 的一些代码进行了逆向工程，并制作了一个与之类似的聊天窗口。但是我有一个网站没有的限制。我不知道 #chathistory 的确切最高值，因为我可能有一个或多个高度可变的 .widget 放在 #chathistory 的顶部。

基本上，我有这段代码:

#chathistory {
    overflow-y: auto; 
    bottom: 60px;
    top: 70px;
    position: absolute;
}

我需要它在没有 top:value 的情况下运行。

可以用 CSS 完成还是我需要 jQuery？如果是后者，我可以得到一些指导吗，因为我的 jQuery 技能充其量是最少的吗？谢谢。

Answer 1

jsFiddle DEMO

此解决方案需要 jQuery，但允许您保留所有其他 CSS 不变，并考虑侧边栏中可能有的许多其他 ".widgets"。勘误表:您必须在 CSS 代码中删除 #chathistory 的 top 样式，如 fiddle 所示。

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!!