无法将最新消息与底部对齐答案

【问题标题】：Can't align latest messages to the bottom无法将最新消息与底部对齐
【发布时间】：2013-06-26 14:12:45
【问题描述】：

我必须创建一个类似 IRC 的网络聊天（最新消息必须出现在父容器的底部）。

这是我的（不成功的）尝试：

.inner-conversation-container {
    height: 100px;
    position: relative;
    overflow: hidden;
    width: 500px;
}


.conversation-stream-container {
    max-height: 100px;
    position: absolute;
    bottom: 0;
    overflow: auto;
    width: 100%;
}

<div class='inner-conversation-container'>
    <div class='conversation-stream-container'>
        <div class='conversation-item'>
            <div class='conversation-message-part' msg-id='137'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='138'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='139'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='140'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='141'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='142'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='143'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='144'>
                <div class='center-part'>The latest message that needs to be in the bottom</div>
            </div>
        </div>
    </div>
</div>

div 和 msg-id="144" 需要可见并与底部对齐。

【问题讨论】：

检查：link
@LinkinTED 给出的链接有你的解决方案。您可能希望将 scollbar 默认设置为底部位置而不是顶部。你需要一个 JavaScript/jQuery 辅助解决方案。
不行，CSS 本身并不能让你控制滚动条的位置。
如果你使用 jquery 是可能的。否则就不可能了。基本上如果你在容器中添加消息，它会自动增加你的容器高度，所以你需要重置到底部..还有一个聊天建议是当你添加新消息滚动在底部但在用户检查时以前的消息滚动不会到底部。它应该与你所在的位置相同。

标签： html css chat

【解决方案1】：

jQuery 辅助解决方案

使用您的 HTML 标记：

<div class='inner-conversation-container'>
    <div class='conversation-stream-container'>
        <!-- A single item -->
        <div class='conversation-item'>
            <!-- Message parts -->
            <div class='conversation-message-part' msg-id='125'>
                <div class='center-part'>test 9</div>
            </div>

            ...

            <div class='conversation-message-part' msg-id='143'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part' msg-id='144'>
                <div class='center-part'>latest needs to be in the bottom</div>
            </div>
        </div>
    </div>
</div>

您可以按如下方式简化您的 CSS：

.inner-conversation-container {
    height: 200px;
    width: 500px;
    border: 2px solid lightgray; /* for demo only */
    overflow: auto;
}
.conversation-stream-container {
    background-color: yellow; /* for demo only */
}

并使用 jQuery 设置滚动条位置：

$('.inner-conversation-container').scrollTop(
   $('.inner-conversation-container')[0].scrollHeight
);

演示小提琴：http://jsfiddle.net/audetwebdesign/FW6Y5/

【讨论】：

为什么要将项目包装成一个对话项目？