无法将最新消息对齐到底部

Question

我必须创建类似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"需要显示并与底部对齐。

Answer 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/