親タグ（td、div）に記入するためのリンク

親タグの寸法が可変である親タグと同じ高さと幅を持つようにするにはどうすればよいですか？親タグ（td、div）に記入するためのリンク

私はthis question hereを見つけました.Gaurav Saxenaは、HTML5のDOCTYPEを追加するまで、最初はうまくいきました。私がそれをしても、Firefox 8ではこれ以上動作しません（ただし、Chromeで動作し続けます）。あなたの助けを事前に

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
.std {width: 200px; border: solid 1px green; height: 100%} 
.std a {display: inline-block; height:100%; width:100%;} 
.std a:hover {background-color: yellow;} 
</style> 
<title></title> 
</head> 
<body> 
<table> 
    <tbody> 
    <tr> 
    <td class="std"> 
    <a href="http://www.google.com/">Cell 1<br> 
    second line</a> 
    </td> 
    <td class="std"> 
    <a href="http://www.google.com/">Cell 2</a> 
    </td> 
    <td class="std"> 
    <a href="http://www.google.com/">Cell 3</a> 
    </td> 
    <td class="std"> 
    <a href="http://www.google.com/">Cell 4</a> 
    </td> 
    </tr> 
</tbody> 
</table> 
</body>

ありがとう：だからここ

は完全な例です！

出典

2011-12-18 Markstar

$('td a').each(function(){ 
    $(this).css({ 
     'width': $(this).parent().width(), 
     'height': $(this).parent().height() 
    }); 
});

DOMロードで実行します。

出典

2011-12-18 14:24:41

お返事のおかげで、私はJavaScriptをせずに機能するソリューションを好むだろう。 – Markstar

少なくとも1つの設定幅または高さを知らなくても、要素を親要素に塗りつぶす信頼できるCSS方法はありません。上記のように、より信頼性の高いクロスブラウザになる可能性のある回避策があります。 –

高さのパーセンテージが高さでないため、これは機能しません。明確にするために、親要素の（td）高さに依存するリンク上にheight: 100%;があります。これは100%でもあり、親の高さに依存しますが、これは設定されていません。したがって、それは幅の仕事をオフにしていません。このための修正は、テーブルまたはtdsのいずれかに高さを設定することです。

例：http://jsfiddle.net/8rRtZ/1/

出典

2011-12-18 14:38:58 Will

親タグ（td、div）に記入するためのリンク

答えて

関連する問題