聊天过程中输入的文字是否与底部对齐? [英] Align text with bottom as it comes in during a chat?

问题描述

我正在构建一个自定义的Web聊天应用程序，虽然我已经掌握了一些基础知识，但我一直在想这是否可行...现在，聊天出现在div的顶部，何时开始?它到达底部时，div开始滚动.这行得通.这很棒.但是我想知道是否有可能像IRC客户端那样创建它，聊天最初是在div的底部出现的，然后每个新行都出现在旧行的下面，依此类推，再一次，当div已满时，它会开始滚动.

I'm building a custom web chat application, and while I have the basics worked out, I've been wondering if this was possible... right now, the chat comes in at the top of the div, and when it reaches the bottom, the div starts scrolling. This works. This is great. But I was wondering if it was possible to create it more like an IRC client, where the chat comes in initially at the bottom of the div, then each new line comes in below the old ones, etc, and again, when the div is full, it starts scrolling.

我已经设法完成了这项工作:可以将它显示为这种方式.但是我找不到滚动它的方法.要么滚动条不出现(当内部文本div上没有溢出，尽管外部容器div上没有溢出)，或者滚动被限制为文本的宽度，而不是容器div的宽度.

I've managed to get part of this working: I can get it displaying this way. But I can't find a way to scroll it; either the scroll doesn't appear (when there's no overflow on the inner, text div, despite there being an overflow on the outer, container div), or it's confined to the width of the text rather than the width of the container 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>

此文本在底部正确显示，但没有滚动条出现.

This has the text appear properly at the bottom, but no scrollbar ever appears.

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

这将使文本正确显示在底部，并出现一个滚动条，但即使宽度= 100％...，它也只能与文本一样宽，并且当文本到达顶部时，滚动条将保持灰色.

This has the text appear properly at the bottom, and a scrollbar appears, but it's only ever as wide as the text, even if width=100%... and when the text reaches the top, the scrollbar remains gray.

基本上，我是否想要内部或容器div上的滚动条，这是否可能，我如何强制其工作，这完全是错误的吗?

Basically, do I want the scrollbar on the inner or the container div, is this even possible, how do I force it to work, and am I going about this entirely wrong?

推荐答案

滚动条不会插入，因为chatmessages只会越来越高.

The scroll-bars don't kick in because chatmessages just keeps getting taller.

使用以下样式:

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

这篇关于聊天过程中输入的文字是否与底部对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！