爲什麼這個bottom-anchored元素不會滾動文字？

Question

解決了this question後，我試圖添加滾動。只有它不起作用。基本上，我有一個底部對齊的日誌「窗口」（最近的消息在底部）。出於某種原因，這使得溢出行爲有所不同。如果我簡單地刪除下面的「bottom：0px」行，它的行爲如同預計。

Here is a jsbin.

CSS

#header { 
    height: 200px; 
} 
#entityFooter { 
    border: 1px solid blue; 
    position: relative; 
    height: 200px; 
    line-height: 30px; 
    overflow-y: scroll; 
} 
#log { 
    position: absolute; 
    bottom: 0px; 
    left: 10px; 
    right: 0px; 
} 

HTML

<div id="header"></div> 
    <div id="entityFooter"> 
    <div id="log" class="collapsed" style=""> 
     <div>This is a line in my log window</div> 
     ... 
     <div>This is a line in my log window</div> 
    </div> 
    </div> 

Answer 1

刪除position: absolute從#log或添加固定高度。絕對定位將刪除文檔流的元素，使其行爲不同

UPDATE

你可以用jQuery做到這一點：

$('#entityFooter').scrollTop($('#entityFooter')[0].scrollHeight); 

JSFIDDLE