0

我在显示样式为表格单元格的 div 中遇到 textarea 问题。你可以在这里看到问题。最后一个 div 有一个 textarea 并且不知何故它会在其自身下方和其他 div 上方产生一个空白区域。

顺便说一句，我正在尝试拥有这样的结构。根据选择，单元格将显示在固定高度的区域中，宽度相等，总宽度为 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;
}
4

1 回答 1

1

使它像这样：

.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}
于 2013-06-26T18:03:02.500 回答