Allineamento di più div alla parte inferiore del div genitore

Question

Ho div più figli all'interno di un div padre. Utilizzando CSS, è possibile allineare verticalmente tutti i div bambino al fondo del contenitore madre affinché verrebbe visualizzato qualcosa di simile al seguente:

L'altezza del div bambino sarà sconosciuto (dinamico).

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

stile di seguito:

#container { 

    height: 500px; 

    } 

Problem demo.

Answer 1

È possibile utilizzare i seguenti stili per il contenitore

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

Solution demo here.