这是一个聊天室,有一个div .words 作为容器,里面有一个.content div。
我想从.content 的底部显示文本,所以我使用 position:absolute, bottom:0;在.content.但我希望它在 .content 高于 .words 时显示滚动条。所以我在 .words 上添加了 overflow:auto。
如果我删除 bottom:0,overflow:auto 将正常工作。但如果 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">×</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);
你永远在最底层
关于css 位置 :absolute, bottom:0 with parent overflow:auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23386106/