CSS: Make a block element fill the entire space of a parent element?

Question

I am trying to put a link in a <th> element and have the <a> element fill the entire space of the <th>. While I can get it to fille horizontally with width:100%, getting it to fill vertically is proving to be troublesome. height:100% seems to have no effect.

I want to do this so that the user can click anywhere in the cell to activate the link. I know I could put an onClick property on the <th> itself and handle it via javascript, but I would like to do it the "proper" css way.

Clarification: Each row of the table can have a different height because the content is dynamic, so solutions that use a fixed height for the <a> or <th> elements will not work.

Here is some sample code:

<style type="text/css">
th {
  font-size: 50%;
  width: 20em;
  line-height: 100%;
}
th a {
  display:block;
  width:100%;
  height:100%;
  background-color: #aaa;
}
th a:hover {
  background-color: #333
}
</style>
<table border=1>
  <tr>
    <th><a href="foo">Link 1</a></th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.</td>
  </tr>
  <tr>
    <th><a href="foo">Link 2</a></th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. </td>
  </tr>
</table>

And here is a page with that exact same code

As you can see if you mouseover the link, the <a> element is not filling vertically which produces an awkward look. I could fix the hover background by putting it in a "th:hover a" style, but the link would still only actually function if you clicked where the actual a tag is.

Answer 1

You need to give the <th> a height, so that your style block will end up something like

th {
  font-size: 50%;
  width: 20em;
  height: 8ex;
  line-height: 100%;
}

Edit: Actually, for height you should probably use a vertical measure like "ex", instead of a horizontal measure of "em". Example changed to reflect that.

Answer 2

In order to do this, you can set the HEIGHT of your "a" element in pixels instead of percentage.

If you specify a percentage, 100% will end up being the height of the TEXT itself.

A pixel height will give you a static height, and will work for this situation.

td a {height: 100px;}

Answer 3

As @Hober says, you need to give the <th> a height. You could also use height: 100% there.

If you know the dimensions of your <th>, which it looks like you probably won't in this case (since they're on the side), I've had luck adding a padding to push the <a> out to the edges (past any padding from the <th> itself), and then bringing it back in with a corresponding negative margin. Like this:

th a{
  padding: 10px 0;
  margin: -10px 0;
}

Answer 4

just change th style to this

th {
  font-size: 50%;
  width: 20em;
  height: 100%;
  line-height: 100%; 
}

cheers

Answer 5

You could do this with javascript (see below).

<style type="text/css">
th {
font-size: 50%;
width: 20em;
background-color: #aaa;

}
.off {
background-color: #aaa;
}
.on {
background-color: #333
}


<th onmouseover="this.className='on'" onmouseout="this.className='off'">><a href="foo">Link 1</a></th>

Answer 6

The th element needs to have a height assigned to it. Giving it a height of 100% should cause the element to expand to the height of its container (i.e. the height of the row). This may not work properly in IE 6, you may try adding _height: 1% to address IE6 - I don't have IE6 to test this with, but I tested in Firefox and it appears to be doing what you want.

th {
  height: 100%;
}

Answer 7

The closest i got was this...

th {
  float: left;
  overflow: hidden;
  font-size: 50%;
  width: 20em;
  margin: auto;
}
th a {
  display: table; /* or block, up to you */
  margin: none;
  width:100%;
  height: 1px;
  background-color: #aaa;
  padding: 20%;
}

But it makes all your rows the same height. Maybe someone else can fix that if it's a problem.