Birden çok div öğesini parent div'in altına hizalama

Question

Ebeveyn div'unda birden çok alt div var. CSS kullanarak, aşağıdaki gibi bir şey görüntülenebilir böylece dikey ana kabın dibine çocuk divs tüm hizaya mümkündür:

çocuk div yüksekliği olacak bilinmeyen (dinamik). Aşağıda

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

stili:

#container { 

    height: 500px; 

    } 

Problem demo.

Answer 1

Kapsayıcıdaki

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

Solution demo here için aşağıdaki stilleri kullanabilirsiniz.