html - 为什么这个底部锚定元素不会滚动溢出的文本？

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

从 #log 中删除 position: absolute 或添加固定高度。绝对定位将元素从文档流中移除并使其表现不同

更新

你可以用 jquery 做到这一点:

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

JSFIDDLE