0

ここでデモンストレーションをご覧ください: http://puu.sh/3YwRt.png

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

サイドバーにチャットのようなoutlook.comを作ろうとしています。

Outlook.com のコードの一部をリバース エンジニアリングし、それに似たチャット ウィンドウを作成しました。ただし、サイトにはない制限があります。#chathistory の上に高さが可変の .widget が 1 つ以上ある可能性があるため、#chathistory の正確なトップ値はわかりません。

基本的に、私はこのコードを持っています:

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

そして、top:value なしで機能する必要があります。

CSS で実行できますか、それとも jQuery が必要ですか? 後者の場合、私のjQueryスキルはせいぜい最小限であるため、その方法についていくつかのガイダンスを得ることができますか? ありがとう。

4

3 に答える 3

0

jsFiddle デモ

このソリューションには jQuery が必要ですが、他のすべての CSS を変更せずに残して".widgets"、サイドバーにある他のすべての要素を考慮することができます。エラータ:フィドルに見られるように、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

これは非常に「実行可能」であるため、自分で試してみましょう。

必要なコードは次のとおりです。

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

ここで、基本的に行うことは、サイドバーのオーバーホールの高さを取得し、すべてのウィジェットの高さを差し引いて、#chathstory の高さを取得することです。次に、「トップ」を変更して、#chathstory より上のすべてのウィジェットの高さの合計と等しくなるようにします。

楽しみ！

于 2013-08-10T18:37:56.120 に答える
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 に答える