在对齐的 div 底部设置许多 div

Question

我无法在垂直对齐的许多 div 中的底部设置 div。

    <p>Top of page</p>
 <div id="container">
 <div class="message">area1</div>
 <div class="message">area2</div>
 <div class="message">area3
    <div class="subarea">subarea3</div>
    <div class="subarea">subarea4</div>
</div>
</div>
<p>Bottom of page</p>

CSS

 #container {
height: 1000px;
}

.message {
height: 80%;
width: 30.6%;
float: left;
border:1px solid red ;
vertical-align: top;
background-color: #D4D0C8;
overflow-x: hidden;
padding-bottom: 120px;
}
.subarea{
padding: 5px;
border-bottom: 1px solid #B9A073;
word-wrap: break-word;
width: 99%;
padding-bottom: 5px;
float: left;
}

这里Jsfiddle demo

看起来是这样的：

但我想要这样：

我已经尝试过，就像其他帖子所说的：

• 将主 div 设置为相对，内部 div 设置为绝对，底部为 0，没有成功。

• 使主 div 垂直对齐底部并显示表格单元格不成功

有什么帮助吗？

Answer 1

您为什么不尝试包装 .subarea 并将其设置为 position: absolute; bottom: 0;？

代码如下

#container {
    height: 1000px;
}

.message {
    position: relative;
    height: 80%;
    width: 30.6%;
    float: left;
    border:1px solid red ;
    vertical-align: top;
    background-color: #D4D0C8;
    overflow-x: hidden;
    padding-bottom: 120px;
}
.subareas{
  position: absolute;
  bottom: 0;
  width: 100%;
}

.subarea{
  padding: 5px;
    border-bottom: 1px solid #B9A073;
    word-wrap: break-word;
    width: 99%;
    padding-bottom: 5px;
    float: left;
}

<p>Top of page</p>
<div id="container">
	<div class="message">area1</div>
	<div class="message">area2</div>
	<div class="message">area3
        <div class="subareas">
          <div class="subarea">subarea3</div>
          <div class="subarea">subarea4</div>
        </div>
  </div>
</div>
<p>Bottom of page</p>