Question

实际上，在Firefox中，textarea浮动在其表格单元格的中间，即使它有height:100%并且“左上角”单元格远远大于它需要的大小。

取消注释标记的CSS行并再次运行。表格单元格，而不是展开以使用其行的整个高度，已折叠到textarea上，随之拖动tr。你可以在边界看到这个。

我希望textarea及其封闭的单元格尽可能高，将“左上角”单元格缩小到可能的最小尺寸，如下所示：

|-------------------------------------|
|Top Left        |Right               |
|----------------|x                   |
||--------------||x                   |
||lorem ipsum   ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||--------------||x                   |
|----------------|--------------------|

我该怎么做？感谢。

P.S。没有javascript，并且重要的是表的整体高度由最右边的单元格动态确定，并且左上角单元格的内容可能会换行，因此无法明确给出左侧单元格的大小。

Answer 1

rowspan混淆了一切......

我建议的解决方案是修改你的表，删除那个行跨度，所以使用两列：

在左边的一个地方有另一个有两行的表，左边的内容是顶部的，textarea的底部是一行;在右栏中放置正确的内容：

<强> HTML：

<table border="1">
  <tr>
    <td id="w"><table id="z">
        <tr>
          <td style="height: 1px">top left</td>
        </tr>
        <tr id="x">
          <td id="y"><textarea name="textarea">lorem ipsum dolor sit amet</textarea></td>
        </tr>
      </table></td>
    <td>Right
      <ul>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
      </ul></td>
  </tr>
</table>

<强> CSS：

td {
   vertical-align: top;        
}
textarea
{
    width: 100%;
    height: 100%;
}

#x, #y, #z, #w
{
     height: 100%;
}

示例：http://jsfiddle.net/3TTES/46/

Answer 2

这不是完美的解决方案，但......

你需要告诉桌子它的高度，所以它不同于自动。

所以你的小提琴css就是这样的

textarea, table, #x, #y
{
    height: 100%; 
}

问题是浏览器现在使用它自己的逻辑来设置单元格的高度，你不能用“高度”覆盖它，所以左上角的单元格非常大。

#z { height:1px; }

即使你把它设置为1px，它仍然可以自己计算......

链接到小提琴： http://jsfiddle.net/c7GNc/

当给定高度时，表格单元缩小：100％

2 个答案: