Css 如何将内容附加到固定高度div的底部并使其溢出-y:scroll？

这个问题解释得相当充分，但这里有一些更详细的内容：

我有一个固定高度的

div

内容通过Ajax动态加载并附加到

div

添加的内容始终位于

div

的底部

2条内容（尚未滚动）

附加内容将现有内容向上推，直到

div

开始沿y方向滚动

5条内容（滚动1条）

这可以通过CSS实现吗

编辑

---

必须在Internet Explorer中工作

我认为您需要使用Javascript来完成滚动部分，方法是在每次追加后将

scrollTop

设置为

scrollHeight

。我的朋友很久以前

将其垂直放置到底部也是一个挑战，但是下面的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;
}

测试1

测试2

测试3

测试4

测试5

测试6

测试7

测试8

测试9

#试验
{
背景：绿色；
高度：100px；
位置：相对位置；
}
#测试。底部
{
底部：0px；
最大高度：100px；
溢出：自动；
位置：绝对位置；
宽度：100%；
}
#测试p
{
保证金：0；
}

这段代码在Firefox和Chrome中适用。它仅在标准模式下的IE（7和8）中工作

<style>
.outer {
    width: 200px;
    height: 200px;
    position: relative;
    border: 2px solid #ccc;
}
.inner {
    width: 200px;
    max-height: 200px;
    position: absolute;
    bottom: 0;
    overflow: auto;
    background: yellow;
}
</style>


<div class="outer">
    <div class="inner">
        text<br />
        text<br />
        text<br />
        text<br />
    </div>  
</div>

.外部{
宽度：200px；
高度：200px；
位置：相对位置；
边框：2个实心#ccc；
}
.内部{
宽度：200px；
最大高度：200px；
位置：绝对位置；
底部：0；
溢出：自动；
背景：黄色；
}
文本

文本

文本

文本

这不会溢出并沿y方向滚动。哇！对不起，我忘记滚动了。我更新了我的答案，它在IE中工作得很好。尽管你仍然需要一些Javascript来将滚动位置设置到底部。到达那里：）IE6不支持max height属性。有一些方法可以模拟IE6中的max height，所以不用担心。这对我来说是一个足够的解决方案，我可以弄清楚细节。谢谢：）

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

<style>
.outer {
    width: 200px;
    height: 200px;
    position: relative;
    border: 2px solid #ccc;
}
.inner {
    width: 200px;
    max-height: 200px;
    position: absolute;
    bottom: 0;
    overflow: auto;
    background: yellow;
}
</style>


<div class="outer">
    <div class="inner">
        text<br />
        text<br />
        text<br />
        text<br />
    </div>  
</div>