在聊天过程中将文本与底部对齐？

Question

我正在构建一个自定义的网络聊天应用程序,虽然我已经完成了基础知识,但我一直想知道这是否可能......现在,聊天进入div的顶部,当它到达时在底部,div开始滚动.这有效.这很棒.但是我想知道是否有可能创建它更像IRC客户端,聊天最初位于div 的底部,然后每个新行都在旧的等等之下,并且当div是完整,它开始滚动.

我已经设法让这部分工作:我可以用这种方式显示它.但我找不到滚动它的方法; 滚动没有出现(当内部,文本div没有溢出时,尽管外部,容器div上有溢出),或者它被限制在文本的宽度而不是容器div的宽度.

我试过的一些选项:

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"></div></div>

这使文本在底部正确显示,但不会出现任何滚动条.

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"></div></div>

这样文本在底部显示正确,并且会出现一个滚动条,但它只有文本宽,即使width = 100%...当文本到达顶部时,滚动条仍然是灰色的.

基本上,我想要内部或容器div上的滚动条,这是否可能,我如何强制它工作,我是否完全错了？

Answer 1

滚动条不会启动,因为chatmessages只是越来越高.

使用这些样式:

    #chatbox
    {
        overflow:   none;
        position:   relative;
        width:      100%;
        height:     400px;
    }
    #chatmessages
    {
        overflow:   auto;
        position:   absolute;
        bottom:     0;
        max-height: 400px;
    }