Question

这是我的HTML：

<table>
    <tbody>
        <tr>
            <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
            <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
        </tr>
    </tbody>
</table>

此问题在此fiddle中可见。

基本上，当我在一列中调整textarea的大小时，我希望另一个textarea具有与另一个相同的高度（基本上强制单元格增加高度）。

我想知道是否有可用的仅CSS 方法。

Answer 1

将min-height: 100%;添加到textarea会使其表现得像您所追求的那样。

table{
    border-collapse: collapse;
}
td{
    border: 3px dashed red;
    padding: 15px;
}

textarea{
    resize: vertical;
    min-height: 100%;
}

<table>
    <tbody>
        <tr>
            <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
            <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
        </tr>
    </tbody>
</table>

修改考虑到上述解决方案的问题，我提出了另一种处理方法，确保 a）在Firefox（以及Chrome）和 b）中有效允许多个调整大小。这个解决方案确实做了一些重大改变：

处理调整大小的div周围的额外table

textarea s不再调整大小

这背后的原因是，调整元素大小会在其上设置height，因此如果调整textarea的大小，则包含的单元格会增长以适应它;如果您然后尝试缩小其他textarea，则它不起作用，因为单元格已经增长到适合较大height的{{1}}。

textarea

div { float: left; overflow: auto; position: relative; resize: vertical; } table { border-collapse: collapse; height: 100%; } td { border: 3px dashed red; height: 100%; padding: 15px; } textarea { height: 100%; resize: none; }

JS小提琴： http://jsfiddle.net/m7t5cqk8/

强制表格单元格从一行中的其他单元格中获取最大高度

1 个答案: