为什么这个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