0

我必须创建一个类似 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>

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

4

1 回答 1

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/

于 2013-06-26T14:58:44.453 回答