CSS位置：绝对，底部：0，父级溢出：自动答案

【问题标题】：css position:absolute, bottom:0 with parent overflow:autoCSS位置：绝对，底部：0，父级溢出：自动
【发布时间】：2014-06-16 15:45:48
【问题描述】：

这是一个聊天室，里面有一个 div .words 作为容器，里面有一个 .content div。

我想从 .content 底部显示文本，所以我使用 position:absolute, bottom:0;在 .content 上。但如果.content 增长高于.words，我希望它显示滚动条。所以我在 .words 上添加了溢出：自动。

如果我删除底部：0，溢出：自动将正常工作。但如果 bottom:0 则不起作用。

如何让输入从底部显示，溢出时会有滚动条？

CSS：

.tbchat-room{
    position: fixed;
    bottom:0;
    width:260px;
    border:1px solid #aaa;
    background:#fff;
}

.tbchat-room .head{
    padding: 3px 10px;
    background:#3d9ac1;
    color:#fff;
}

.tbchat-room .words{
    height:230px;
    background:#ececec;
    overflow:auto;
    position:relative;
}

.tbchat-room .words .content{
    position:absolute;
}

.tbchat-room .say{
    width:246px;
    margin:0;
    border-top: 1px solid #ccc;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    padding:4px 6px;
}

.pull-right{
    float:right;
}

.content{
    padding:5px 10px;
}

HTML：

<div class="tbchat-room">
    <div class="head">
        <span class="title">Chat Room</span>
        <a class="room-close-button pull-right">&times;</a>
    </div>
    <div class="words">
        <div class="content">
            <div>sample text</div>
            <div>sample text</div>
        </div>
    </div>
    <input class="say" type="text"/>
</div>

http://jsfiddle.net/s8jD5/

【问题讨论】：

删除 botton:0 并尝试以另一种方式滚动。 stackoverflow.com/questions/270612/scroll-to-bottom-of-div

标签： css html scroll vertical-alignment

【解决方案1】：

尝试保留overflow-y:auto，并在每次将新的聊天消息添加到框中时运行此 jQuery 语句

$('.words').scrollTop($('.words')[0].scrollHeight);

你永远处于低谷

【讨论】：

【解决方案2】：

您可以给 .content div 一个最大高度并将溢出设置到该 div 而不是 .words div 像这样：

CSS

.tbchat-room .words .content{
    position:absolute;
    bottom:0;
    overflow:auto;
    width: 100%;
    box-sizing: border-box;
    max-height: 230px;
}

Updated Fiddle

编辑：

您还应该将以下代码添加到您的 Javascript 中，以确保在添加新消息时您会自动转到 .content div 的底部（即查看新消息）

$('.content').scrollTop($('.content')[0].scrollHeight);

【讨论】：