1

だから私は自分のウェブサイトのメッセージ/会話ページのスタイリングに取り組んでいますが、少し問題が発生しています.

これが最終的に解決したいことです。会話を開くと、最後の 15 ～ 20 件のメッセージが div に読み込まれますが、div を 1 ページに収めたいと思います。つまり、div は画面の高さでなければならないということです。上下にスクロールしたいのはメッセージだけです。

私のウェブサイトのヘッダーは常に表示されている必要があります。下にスクロールして会話の最後に到達すると、ページ全体が少し下にスクロールして、私の Web サイトのフッターが表示されます。

私が求めているのは、Facebook のメッセージ ページのようなものです。

ここに画像の説明を入力

私が何を求めているのか理解できるかどうかわからないので、Facebook メッセージ ページに小さな例を追加します (スクロールバーは画像にありません)。画像では、ページをロードしたときに得られるものです。下にスクロールするとフッターが表示され、上にスクロールすると返信ボックスが画面の下部に固定され、移動するのは会話（真ん中の赤い四角）

これが機能したら、ロードされたメッセージの先頭に到達したら、メッセージをロードする機能を追加します。

CSSだけでこれを行うことができるかどうかはわかりません。いつかJqueryを使用する必要があると確信していますが、CSSで可能なすべてのものをCSSで作成したいと考えています。

これを実現する方法がわかりません。

4

3 に答える 3

0

別の解決策は、次の CSS を設定することです。

ヘッダ用

{position:fixed;top:0px;}

返信用

{position:fixed;bottom:0px;}
于 2012-08-25T11:27:30.690 に答える
0

メッセージ div のスタイルを設定するには、以下のコードのようなものを試すことができます。

#yourdiv {
    position: absolute;
    top: 35px; //This is the height of your header.
    width: 400px;//Width of your message div.
    bottom: 0;
    background-color: gray;
    overflow-y: auto;//Only scrolls vertically
}

これは動作中のライブデモです。(デモでは、メッセージ div は左に配置されます。マージンを設定することでこれを変更できます。ページの中央にしたい場合autoは、左右両方のマージンを試してください)

お役に立てれば。

于 2012-08-25T12:55:25.583 に答える
0

ここに小さなデモがあります: little link . 基本的で十分な関連 CSS は次のとおりです。

html, body {
    height: 100%; /*100% of window*/
}
#messages {
   height: 80%; /*limit the height to 80% of the page*/
   overflow-y: auto; /*messages don't fit? add scrollbars*/  
}

HTML:

<div id = "messages">
    <div class = "message">Glee is awesome!</div>
    <div class = "message">Glee is awesome!</div>
    <div class = "message">Glee is awesome!</div>
    ...
</div>
<div>...Stuff for sending here...</div>

それが何らかの形で役立つことを願っています!

于 2012-08-25T11:03:36.127 に答える