Làm cách nào để có thể thêm nội dung vào dưới cùng của div chiều cao cố định và có nó tràn-y: cuộn?

Question

Câu hỏi đặt ra giải thích nó khá đầy đủ, nhưng đây là một số chi tiết hơn:

1. Tôi có một div với chiều cao cố định.
2. Nội dung được tải động qua Ajax và được thêm vào div.

Nội dung đã thêm luôn được đặt ở dưới cùng của div.

2 mẩu nội dung (không di chuyển được nêu ra)

-------------------------div-- 
|       | 
|       | 
|       | 
|       | 
| some content (10:00 am) | 
|       | 
| some content (10:03 am) | 
------------------------------ 

nội dung bổ sung đẩy nội dung hiện lên cho đến khi div bắt đầu để di chuyển trong y-hướng.

5 mảnh của nội dung (1 item cuộn)

-------------------------div-- 
| some content (10:03 am) ^| 
|       | 
| some content (10:04 am) #| 
|       #| 
| some content (10:07 am) #| 
|       #| 
| some content (10:09 am) v| 
------------------------------ 

này có thể được thực hiện với CSS?

EDIT

Phải làm việc trong Internet Explorer!

Answer 1

Tôi nghĩ bạn cần sử dụng Javascript để thực hiện phần cuộn bằng cách đặt scrollTop thành scrollHeight sau mỗi lần nối thêm. Bạn thân của tôi Eric Pascarello posted a solution khá lâu rồi.

Bắt nó theo chiều dọc vị trí tốt để phía dưới cũng có phần của một thách thức, nhưng CSS sau đây phải làm điều đó ...

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

Answer 2

Mã này làm việc cho tôi trong Firefox và Chrome. Nó chỉ hoạt động trong IE (7 và 8) theo chế độ tiêu chuẩn.

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