html - 显示：表格：增加表格单元格的高度会导致其他单元格中的填充

Question

我正在使用display: table并display: cell拥有 3 列等高的布局。

这是我的代码，

HTML：

<div id='wrapper'>
 <aside class='column'>Left sidebar</aside>
 <div id='main' class='column'>
     <textarea rows="2"></textarea><br>Main content <br>
     <br><br><br>
 </div>
 <aside class='column'>Right sidebar</aside>
</div>

CSS：

#wrapper {
    display: table;
}
aside {
    background-color:#EEE;
    margin:0;
    padding: 0;
}
.column {
    display: table-cell; 
}

JS

$('textarea').focus(function () {
    $(this).attr('rows',8);
});

这是演示

现在，

当我专注于 时textarea，高度会textarea增加，因此高度div#main也会增加。这padding-top在两个aside's 中添加了一个。

我不确定是否是它display:table背后display:cell的原因，但我无法弄清楚这个问题。

Answer 1

在我写这个问题的时候，我发现了这个问题，所以分享它来帮助别人。

默认情况下，带有 的 htmldisplay: cell元素vertical-align: middle。

因此，每当height一个单元格增加时，其他单元格的内容就会发生变化vertical-align:middle。（它不是填充顶部，而是单元格中间的垂直对齐）

所以，要解决这个问题，

我将此添加到我的CSS中，

.column {
    display: table-cell; 
    vertical-align: top;
}