Html Can'；t将最新消息与底部对齐

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

以下是我（未成功）的尝试：

。内部对话容器{
高度：100px；
位置：相对位置；
溢出：隐藏；
宽度：500px；
}
.会话流容器{
最大高度：100px；
位置：绝对位置；
底部：0；
溢出：自动；
宽度：100%；
}

内容
内容
内容
内容
内容
内容
内容
需要放在底部的最新消息

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>

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

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

---

演示小提琴：

检查：@LinkinTED提供的链接有您的解决方案。您可能希望将scollbar默认设置为底部位置，而不是顶部位置。你需要一个JavaScript/jQuery辅助解决方案。不，CSS本身不允许你控制滚动条的位置。如果你使用jQuery，这是可能的。否则就不可能了。基本上，如果你在容器中添加消息，它会自动增加容器的高度，因此你需要重置为底部。。另外一个聊天建议是，当你添加新的信息时，滚动条位于底部，但在用户检查以前的信息时，滚动条不会位于底部。这应该与你的位置相同。为什么要将项目包装到一个对话项目中？

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