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

Question

请在此处查看演示： 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技能充其量只是最低限度，请吗？ 谢谢。

Answer 1

我将让您尝试自己执行此操作，因为它非常“可行”。

您可能需要的所有代码是：

$(element).css('top',X);
$(element).height(X); // Set height
$(element).height(); // Get height

现在，您基本上要做的是获取侧边栏的大厅高度，然后减去每个小部件的高度，以获取您的#chathistory的高度。 然后，您将修改“ top”，使其等于#chathistory上方每个小部件高度的总和。

请享用！

Answer 2

我认为这可以满足您的需求：

http://jsfiddle.net/tprats108/7LBcr/3/

CSS：

#chatbar {
    height: 100%;  // This is pretty much the main difference (also removed top)
}

.first {
    height: 30px;
}
#sidebar, #chathistory, textarea {
    width:300px;
}
#sidebar {
    position:fixed;
    display:block;
    right:0;
    top:0;
    bottom:0
}
.widget {
    background: #eee;
    margin: 10px 0
}
#chathistory {
    overflow-y: auto;
    bottom: 60px;
    position: absolute;
}
textarea {
    bottom:0;
    right:0;
    height:50px;
    position:absolute;
}

html ：（除了整理之外，我认为我没有改变它）

<div id="sidebar">
    <div class="widget first">Variable content</div>
    <div class="widget" id="chatbar">
        <span class="username">John Doe</span>
        <div id="chathistory">
            <div class="msgs">This is a sample chat msg. Lorem Ipsum</div>
            <div class="msgs">This is a sample chat msg. Dolor Sit</div>
            <div class="msgs">This is a sample chat msg. Amet Confus</div>
            <div class="msgs">This is a sample chat msg. Lorem Ipsum</div>
            <div class="msgs">This is a sample chat msg. Dolor Sit</div>
            <div class="msgs">This is a sample chat msg. Amet Confus</div>
            <div class="msgs">This is a sample chat msg. Lorem Ipsum</div>
            <div class="msgs">This is a sample chat msg. Dolor Sit</div>
            <div class="msgs">This is a sample chat msg. Amet Confus</div>
            <div class="msgs">This is a sample chat msg. Lorem Ipsum</div>
            <div class="msgs">This is a sample chat msg. Dolor Sit</div>
            <div class="msgs">This is a sample chat msg. Amet Confus</div>
            <div class="msgs">This is a sample chat msg. Lorem Ipsum</div>
            <div class="msgs">This is a sample chat msg. Dolor Sit</div>
            <div class="msgs">This is a sample chat msg. Amet Confus</div>
            <div class="msgs">This is a sample chat msg. Lorem Ipsum</div>
            <div class="msgs">This is a sample chat msg. Dolor Sit</div>
            <div class="msgs">This is a sample chat msg. Amet Confus</div>
        </div>
        <textarea rows="1" cols="30"></textarea>
    </div>
</div>

Answer 3

jsFiddle演示

此解决方案需要jQuery，但允许您保留所有其他CSS不变，并在边栏中添加其他".widgets" 。 勘误表：必须卸下top的造型#chathistory在你的CSS代码，如小提琴可见。

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