0

誰かがテキストを入力して送信すると、テキストを下から表示したいのですが、ターゲットがいるチャットプログラムがあります。他のチャット フレームと同様です。これを行うために、次の html/css 構造を作成しました。ここでは、誰かがテキストを送信すると、「li」タグが動的に作成されます。

問題：

問題は、「.chatbox ul」から「height:100%」を削除すると、チャットボックスのテキストが下から始まることです。しかし、その場合、スクロールバーは表示されません。しかし、スクロールバーが必要です。また、「.chatbox ul」に「height:100%」を保持すると、スクロール バーが表示されますが、チャットボックスのテキストは上から始まります。

私の目標は、スクロール バーを持つことであり、テキストも下から開始する必要があります。どうすればこれを達成できますか..?? みんな助けて??

<div class="chatBox">
<ul id="messages" class="chatText">
    <li>
    <div class="chatterName">maverick </div>
    <div class="chatterMessage"> hi</div>
    <div class="clear"></div>
    </li>
    
    <li>
    <div class="chatterName">johny</div>
    <div class="chatterMessage"> hello</div>
    <div class="clear"></div>
    </li>
</ul>

CSS:

.chatBox
{
background-image: url('../images/DefaultitemBg.gif');
font-family: Verdana;
font-size: 14px;
color: #333333;
border: 1px double #FFFFFF;
padding: 5px;
margin: 10px;
width:76%;
height:600px;
position:relative;
border: 1px solid #E9E9E9;
overflow:auto;
float:left;

}
.chatBox ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
position:absolute;
overflow:auto;
bottom:0;
height:100%;
}
.chatBox ul li
{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #F2F2F2;
margin-bottom: 0px;
}
.chatterName
{
width: 120px;
background-color: #EEEEEE;
color: #333333;
float: left;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #CCCCCC;
height: 30px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #E6E6E6;
}
.chatterMessage
{
width: 91%;
padding-left:4px;
color: #333333;
float:left;
min-height:30px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #EFEFEF;
}
.chatText
{
bottom: 0;
left: 0;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 1;
border-left-style: 0;
border-bottom-width: 1px;
border-bottom-color: #E6E6E6;

width:100%;

}

編集：

ライブはこちらから

よく見ると、チャットボックスにテキストを入力しているときに、上から前のテキストが消えていることに気づきます。私が欲しいのは、ユーザーが以前のメッセージを見ることができるスクロールバーです。

4

2 に答える 2

2

JavaScript を使用して下にスクロールできます。

document.getElementById('messages').innerHTML += '<li>'+your message here+'</li>'
window.scrollTo(0, document.body.scrollHeight)
于 2012-10-03T13:47:10.950 に答える
0

これはそれを解決するはずです：

max-heightの代わりに使用height

.chatBox ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
position:absolute;
overflow:auto;
bottom:0;
max-height: 100%;
/*height:100%;*/
}

実例： http： //jsfiddle.net/pt43J/1/

于 2012-10-03T14:28:54.223 に答える