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);
});

这是demo

现在，

当我专注于textarea时，textarea的高度会增加，因此div#main的高度也会增加。这会为padding-top的{{1}}添加aside。

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

Answer 1

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

默认情况下，display: cell的html元素为vertical-align: middle。

因此，当一个单元格的height增加时，其他单元格的内容会因vertical-align:middle而移位。（它不是填充顶部，而是在细胞中间垂直对齐）

所以，要解决这个问题，

我把它添加到我的CSS中，

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

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

1 个答案: