0

请在此处查看演示：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 技能充其量是最低限度的，我可以提供一些指导吗？谢谢。

4

3 回答 3

0

我会让你自己尝试这样做，因为它非常“可行”。

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

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

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

享受！

于 2013-08-10T18:37:56.120 回答
0

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

开始了

于 2013-08-10T18:52:01.063 回答
0

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

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>
于 2013-08-10T18:47:22.693 回答