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

Question

I am trying to put a link in a element and have the element fill the entire space of the . While I can

Answer 1

just change th style to this

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

cheers

Answer 2

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 3

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 4

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 5

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 6

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>