html - 表格单元格在给定高度 :100% 时缩小

Question

Here is a jsFiddle .

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

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

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

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

我该怎么做？谢谢。

附言没有 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/