这个问题解释得非常全面,但这里有一些更详细的信息:
- 我有一个固定高度的
div
。 - 内容通过 Ajax 动态加载并附加到
div
。
添加的内容始终位于 div
的底部。
2 条内容(还没有滚动)
-------------------------div--
| |
| |
| |
| |
| some content (10:00 am) |
| |
| some content (10:03 am) |
------------------------------
附加内容会将现有内容向上推,直到 div
开始沿 y 方向滚动。
5 条内容(滚动 1 条)
-------------------------div--
| some content (10:03 am) ^|
| |
| some content (10:04 am) #|
| #|
| some content (10:07 am) #|
| #|
| some content (10:09 am) v|
------------------------------
这可以用 CSS 完成吗?
编辑
必须在 Internet Explorer 中工作!
最佳答案
我认为您需要使用 Javascript 来完成滚动部分,方法是在每次追加后将 scrollTop
设置为 scrollHeight
。我哥们Eric Pascarello posted a solution很久以前。
将它垂直定位到底部也是一个挑战,但下面的 CSS 应该可以做到......
<div id="test">
<div class="bottom">
<p>Test1</p>
<p>Test2</p>
<p>Test3</p>
<p>Test4</p>
<p>Test5</p>
<p>Test6</p>
<p>Test7</p>
<p>Test8</p>
<p>Test9</p>
</div>
</div>
#test
{
background:green;
height:100px;
position:relative;
}
#test .bottom
{
bottom:0px;
max-height:100px;
overflow:auto;
position:absolute;
width:100%;
}
#test p
{
margin:0;
}
关于css - 如何将内容附加到固定高度 div 的底部并让它溢出-y : scroll?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1882429/