css在聊天室中

时间:2012-10-03 13:38:56

标签: html css

我有一个聊天程序,我的目标是,当有人输入并发送文本时,我希望从底部显示文本。像任何其他聊天框架一样。 为此,我编写了以下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%;

}

编辑:

See it live here

如果您仔细查看,您会注意到我在聊天框中输入文本时,从顶部开始,以前的文本正在消失。 我想要的是一个滚动条,以便用户可以看到以前的消息。

2 个答案:

答案 0 :(得分:2)

您可以使用javascript滚动到底部:

document.getElementById('messages').innerHTML += '<li>'+your message here+'</li>'
window.scrollTo(0, document.body.scrollHeight)

答案 1 :(得分: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/