0

次の簡略化されたレイアウトがあります。

jsfiddle: http://jsfiddle.net/rersW/

<table>
  <tr>
    <td style="border:1px solid black;height:300px;width:100px">A</td>
    <td style="border:1px solid black;height:100%">
      <div style="border:1px solid blue;height:100%;width:100px">B</div>
    </td>
  </tr>
</table>

セルを埋めるには、青い輪郭の div が必要です。div とセルのボックス サイズ変更と、両方の表示の変更 (インライン ブロックなど) を試しました。私が試したことは何も機能していません。

セル "A" の内容によってテーブルの高さが決まります。

セル「B」の内容によって、セルの幅が決まります。

Chrome、Firefox、Safari、Opera、IE 8 以降で同じように動作する必要があります。

ティア

4

4 に答える 4

0

これを試して、正しくない場合はコメントを投稿してください:|

http://jsfiddle.net/rersW/1/

于 2012-04-19T23:34:32.053 に答える
0

その理由は、高さが定義height: 100%;された親を持つ必要があるか、そうでなければあなたがしなければならないからです

  • 高さを固定するか。
  • height: 100%または、高さがどこにも固定されていない場合は、すべてをボディまでチェーンします

私の要点を説明するために、マークアップをこれにアップグレードします

<td valign="top" style="border:1px solid black; height: 300px;">
  <div style="border:1px solid blue;height:100%; display: block;width:100px">B</div>
</td>

デモ

于 2012-04-19T23:35:01.587 に答える
0

アップデート：

私はJSなしで動作するものを思いつきました:

<table>
  <tr>
    <td>
      <div style="position:relative">
        <table>
          <tr>
            <td style="border:1px solid black;height:300px;width:100px">A</td>
            <td style="border:1px solid black;height:100%">
              <div style="border:1px solid blue;box-sizing:border-box;height:100%;width:100px">&nbsp;</div>
            </td>
          </tr>
        </table>
        <div style="border:1px solid red;height:100%;position:absolute;right:0;top:0;width:100px">B</div>
      </div>
    </td>
  </tr>
</table>

レンダリングするときれいに見えませんが、プロダクション構造にはボーダーやパディングがありません。

より単純なソリューションが優先されます。

于 2012-04-20T00:23:36.767 に答える
0

Height:100% では、親に明示的な高さが必要です。セル a と同じ高さをセル b に設定します。これにより、テーブルの高さが決まります。この場合は 300px で、子 div が拡張されます。

EDIT 親の高さを明示的に定義できない場合は、JS/Jquery を使用する必要があります。ここを参照してくださいhttp://jsfiddle.net/rersW/3/

于 2012-04-19T23:27:36.643 に答える