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...

私が提案する解決策は、テーブルを変更し、その行スパンを削除して、2つの列を使用することです。

左側に2行の別のテーブルを配置します。上部は左側のコンテンツ用、下部は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 に答える