Question

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

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

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

$(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 DEMO

此解决方案需要jQuery，但允许您保持所有其他CSS不变，并在侧边栏中占用尽可能多的其他".widgets"。错误：您必须在CSS代码中删除top的{{1}}样式，如小提琴中所示。

#chathistory

Here we go

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

3 个答案: