css位置：绝对，底部：0，父级溢出：自动

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

我想从.content的底部显示文本，所以我使用position:absolute，bottom:0；关于内容。但我希望它显示滚动条，如果。内容增长高于。单词。所以我添加了溢出：auto-on.words

如果我删除底部：0，溢出：自动将正常工作。但如果底部为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;
}

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

HTML:

.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;
}

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

聊天室
尝试保持
overflow-y:auto
，并在每次向框中添加新聊天信息时运行此jQuery语句

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

您将始终处于底部
您可以为
.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;
}


编辑：

.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;
}

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

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

删除
botton:0
，然后尝试以另一种方式滚动。