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

Posted 2023-03-05

【中文标题】CSS位置：绝对，底部：0，父级溢出：自动

【英文标题】：css position:absolute, bottom:0 with parent overflow:auto

【发布时间】：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 并尝试以另一种方式滚动。 ***.com/questions/270612/scroll-to-bottom-of-div

【参考方案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);