将多个 div 对齐到父 div 的底部

Question

我在一个父 div 中有多个子 div。使用 CSS，是否可以将所有子 div 垂直对齐到父容器的底部，以便显示如下内容：

子 div 的高度未知（动态）。

<p>Top of page</p>
<div id="container">
<div class="message">Message 4</div>
<div class="message">Message 3</div>
<div class="message">Message 2</div>
<div class="message">Message 1</div>
</div>
<p>Bottom of page</p>

样式如下：

#container {

    height: 500px;

    }

Problem demo.

Answer 1

容器可以使用以下样式

display: table-cell;
vertical-align: bottom;

Solution demo here.