鏈接填寫父標籤（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 2011-12-18 14:29:47

Theres沒有可靠的CSS方法來填充元素到父元素中而不知道至少一個集合的寬度或高度。儘管如此，仍有一些解決方法，如上所述，這將更可靠的跨瀏覽器。 – 2011-12-18 14:39:20

這不起作用，因爲你有百分之高度的百分之高度沒有高度。爲了澄清，你有鏈接上的height: 100%;，這將依賴於父元素的（td）高度。這也是100%，然後依靠其父母的高度，這是不設置。因此，它沒有寬度的工作。解決這個問題的方法是在桌面或tds上設置高度。

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

來源

2011-12-18 14:38:58 Will

鏈接填寫父標籤（td，div）

回答

相關問題