display:table:增加表格单元格的高度会导致其他单元格中的填充

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人的.

我不知道,如果display:table和display:cell它背后的原因,但我不能找出问题.

Answer 1

在我写这个问题时,我想出了这个问题,所以分享它来帮助别人.

默认情况下,html元素display: cell具有vertical-align: middle.

因此,无论何时height一个细胞增加,其他细胞的含量都会因为而变化vertical-align:middle.(它不是填充顶部,而是在单元格中间垂直对齐)

那么,要解决这个问题,

我把它添加到我的CSS中,

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