为什么父 DIV 在子元素仍有空间下移的情况下调整大小?

Question

抱歉，如果这个问题看起来重复，但这些解释在某种程度上与我正在寻找的有所不同。

我有一个显示table的DIV。它有两个DIV作为细胞，内部也有自己的DIV。

<div class="theTable">
<div class="theRow">
<div class="cell1">
<div class="cell1Content">
cell one content
</div>
</div>
<div class="cell2">
<div class="cell2Content">
cell two content
</div>
</div>
</div>
</div>

现在，当通过任何方式(例如写入或更改属性(放大其中一个单元格(例如cell2(的内容，而不是从下方放大内容并填充父 DIV 的区域(这是一个单元格(时，发生的情况是父DIV实际上是从顶部扩展的。不需要此行为。我希望父DIV保持相同的大小，并且内容从底部(向下(调整大小。 我知道这可以使用，position:relative, top:2em，但这不是我打算做的，因为我不想破坏document的流程，而是关于如何解决这个问题的简单答案。 与上述情况一样，CSS文件如下所示：

.theTable {display:table}
.theRow {display:table-row;} 
.cell1 {display:table-cell}
.cell2 {display:table-cell}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}

如果您更改最后一行 (margin-top:0em(，您将看到，不仅子项在更改大小，而且父项也在更改大小。我不明白为什么？对此，我们能做些什么呢？

Answer 1

所以你想要的是细胞从底部开始向上生长，对吗？

这样的事情可以解决它： http://jsfiddle.net/7y19n8eh/

.theTable {display:table}
.theRow {display:table-row;} 
.cell1 {display:table-cell;vertical-align: bottom}
.cell2 {display:table-cell;vertical-align: bottom}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}

我所做的是将垂直对齐：底部添加到单元格中。 垂直对齐属性设置元素的垂直对齐方式，并与所有主流浏览器兼容。