Wyrównanie wielu elementów div do dolnej części jednostki nadrzędnej

Question

Mam wiele elementów div dziecka w div jednostki nadrzędnej. Korzystanie CSS, możliwe jest pionowo wyrównać wszystkie div dzieci do dołu kontenera nadrzędnego tak, że coś jak poniżej będą wyświetlane:

Wysokość div dziecko będzie nieznany (dynamiczny).

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

styl poniżej:

#container { 

    height: 500px; 

    } 

Problem demo.

Answer 1

Można stosować następujące style pojemnika

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

Solution demo here.