Ausrichten mehrerer divs an den unteren Rand des übergeordneten div

Question

Ich habe mehrere untergeordnete divs in einem übergeordneten div. Mit CSS, ist es möglich, vertikal alle untergeordneten div-Tags auf den Boden des übergeordneten Container so ausrichten, dass so etwas wie die folgenden würde angezeigt:

Die Höhe der Kinder divs sein unbekannt (dynamisch).

<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> 

Stil unter:

#container { 

    height: 500px; 

    } 

Problem demo.

Answer 1

können Sie die folgenden Stile für die

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

Solution demo here Behälter verwenden.