我在父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>
Run Code Online (Sandbox Code Playgroud)
风格如下:
#container {
height: 500px;
}
Run Code Online (Sandbox Code Playgroud)
问题演示.
当我使用Google Page Speed Insights时
它说我的CSS是渲染阻塞的,因此减慢了页面的初始加载速度.在以前的项目中,我使用Javascript动态添加了CSS,这很好地推迟了加载.那么在使用bundle时防止渲染阻塞的最佳方法是什么?
在bundle.config我有:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"
));
Run Code Online (Sandbox Code Playgroud)
在_Layout.cshtml中
@Styles.Render("~/Content/css")
Run Code Online (Sandbox Code Playgroud)