将多个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