将 Div 的内容垂直对齐到底部，滚动条用于溢出

问：

我在固定位置的 div 中有可变高度的内容。就我而言，它是一个表，它向其中添加行。我需要它把它排在 div 的底部，我通过使内容位置绝对底部 0 来实现。

<div id="outer">
  <div id="inner">
    <table border="1">
      <tr>
        <td>BlahBlahBlah</td>
      </tr>
      <!-- Add more rows here. -->
    </table>
  </div>
</div>

#outer {
  position: absolute;
  top: 16px;
  left: 64px;
  right: 64px;
  bottom: 128px;
  padding-bottom: 16px;
  background: #EEEEEE;
}

#inner {
  position: absolute;
  top: 0px;
  left: 32px;
  right: 32px;
  bottom: 16px;
  overflow-y: auto;
}

table {
  width: 100%;
  /**
  This aligns content to the bottom,
  but there's never a scrollbar.*/
  position: absolute;
  bottom: 0;
}

http://jsfiddle.net/2g1kLd5g/

如果我添加内容，它仍然在底部排列，但最终内容变得比 div 高。在这种情况下，新内容会溢出 div 的顶部，并且无法看到。

http://jsfiddle.net/rs7ewqdu/

因此，我想要一个滚动条，以便用户可以向上滚动以查看隐藏的内容。如果我删除绝对定位并将 overflow-y auto 保留在父 div 上，那么我就会有一个滚动条，但是它总是从顶部位置开始，并且每次加载页面时都必须向下滚动。

http://jsfiddle.net/oncqwq9o/

这可以通过 JavaScript 自动滚动来解决（不是理想情况下）。然而，这里真正的问题是，如果我使内容更短，它现在不再排列在 div 的底部。

http://jsfiddle.net/1wnqbgbo/

#inner {
  position: absolute;
  top: 0px;
  left: 32px;
  right: 32px;
  bottom: 16px;
  overflow-y: auto;
  vertical-align: bottom;
  display: table-cell;
}

垂直对齐似乎没有任何效果，我尝试了 display：table-cell 和 display：block。我发现获得我想要的对齐的唯一方法是绝对位置，当我这样做时，没有滚动条。

有谁知道我如何让内容的底部默认与 div 的底部对齐，并有一个滚动条来处理溢出？如果存在，我更喜欢纯CSS解决方案。