css - 複数の 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;

    }

問題のデモ。

Answer 1

コンテナには次のスタイルを使用できます

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

ソリューションのデモはこちら.