在div中显示textarea的问题：table-cell

Question

我在显示样式为table-cell的div中使用textarea时遇到问题。您可以看到问题here。最后一个div有一个textarea，它会以某种方式在其自身下方和其他div之上产生一个空白区域。

顺便说一下，我正试图建立一个像this这样的结构。根据选择，单元将显示在具有相等宽度的固定高度区域中，总共100％。当任何div内有textarea时会出现问题。如果现有组件的行为与此类似，我们将不胜感激。

HTML

<div class="panes">
    <div id="pane1" class="pane">
        <div class="pane-content"></div>
    </div>
    <div id="pane2" class="pane">
        <div class="pane-content"></div>
    </div>
    <div id="pane3" class="pane">
        <div class="pane-content">
            <textarea></textarea>
        </div>
    </div>
</div>

CSS

.panes {
    display: table;
    table-layout: fixed;
    width:100%;
    height:100px;
}
.pane {
    display: table-cell;
    border: solid 1px;
}
.pane-content {
    display: block;
    overflow: auto;
    height: 100px;
    border: solid 1px red;
}
.pane-content textarea {
    display: block; /*This fix the issue in IE but other browsers still broken*/
    width: 100%;
    height: 100px;
}

Answer 1

像这样：

.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}