Link to fill out a parent tag (td, div)

Question

how do I get my link to have the same height and width as the parent tag, where the parent tags dimensions are variable?

I found this question here, where Gaurav Saxena made a post that worked at first - until I added the DOCTYPE for HTML5. If I do that, it not work in Firefox 8 anymore (it continues to work in Chrome, though).

So here is the complete example:

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

Thanks in advance for your help!

score 1 · Answer 1 · answered Dec 18 '11 at 14:24

1

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

Run on document DOM load.

answered Dec 18 '11 at 14:24

paulcol.

2,910
1
21
19

Thanks for your reply, but I would prefer a solution that works without JavaScript. – Markstar Dec 18 '11 at 14:29
Theres no reliable css way to fill an element into a parent element without knowing at least one set width or height. There are workarounds though, like above, which will be more reliable cross-browser. – paulcol. Dec 18 '11 at 14:39

score 1 · Answer 2 · answered Dec 18 '11 at 14:38

This doesn't work because you have a percent height of a percent height of no height. To clarify, you have height: 100%; on the link, which will rely on the parent element's (the td) height. This is also 100%, which then relies on its parent's height, which is not set. Therefore, it does not have a width work off of. A fix for this would be to set a height on either the table or the tds.

Example: http://jsfiddle.net/8rRtZ/1/

Link to fill out a parent tag (td, div)

2 Answers2