調整多個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; 

    } 

Problem demo。

Answer 1

您可以使用以下樣式的容器

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

Solution demo here。