html - を作るcssだけで親()の高さを継承する?

Question

http://jsfiddle.net/ZAvDd/

テーブルの行の高さが大きくなるにつれて、内部の div も自動的に一致するようにしたいと思います。

上記のコードでは、 mydivの高さは常に0です。

height:inherit親 ( ) の高さを明示的に指定した場合にのみ機能することは理解してい<td>ますが、そこに表示されるコンテンツの高さがわからないため、そうしたくありません。

これを行うためのcssトリックはありますか、それともJSに頼る必要がありますか?

Answer 1

ルールを使用することはできませんheightが、div を絶対に配置することで目的の効果を得ることができます。これにより div のレイアウトが変更されるため、td代わりに幅を適用する必要があります。

td.fooed {position:relative; width:30px;}
td.fooed .foo {
    position:absolute; top:0px; left:0px; right:0px; bottom:0px;
    background:gray;
}

これがあなたのフィドルです：http://jsfiddle.net/ZAvDd/2/

Answer 2

あなたのdivの目的は何ですか？

div は空であるため、現在の高さは 0 (ゼロ) です。できることは、クラスを追加することにより、スタイルを親 td に直接適用することです。

<td class="bar">

それに応じてスタイルを設定します。

.bar { background: gray;}

それは本当にあなたのdivの目的に依存します。