1

这是一个 jsFiddle。

事实上，在 Firefox 中，textarea 浮动在其表格单元格的中间，即使它有height:100%并且“左上”单元格比它需要的大得多。

取消注释标记的 CSS 行并再次运行它。表格单元格没有展开以使用其行的全部高度，而是折叠到文本区域上，tr并随之向下拖动。您可以在边框中看到这一点。

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

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

我该怎么做呢？谢谢。

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

4

2 回答 2

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/

于 2012-09-01T17:38:57.610 回答
0

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

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

所以你的小提琴CSS会这样

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

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

#z { height:1px; }

即使您将其设置为 1px，它仍然会自行计算...

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

于 2012-09-01T17:48:08.783 回答