Getting div to occupy full cell height

Question

How do I get divs within table cells to occupy the full height of the cell?

Setting div height=100% won\'t work unless the table cell has a fixed height on it, but

Answer 1

Could you use this? It makes all of the divs with this attached to it the same height.

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

Source: http://www.cssnewbie.com/equal-height-columns-with-jquery/

Answer 2

Did some Googling and found this thread in a forum. It seems to be impossible to do it via CSS. But this has a JavaScript solution. As suggested in my comment above, why not move the border CSS to the td?

Answer 3

Try this:

table { height: 100%; }

td
{
    padding:0px;
    vertical-align:top;
    height:100%;
}

.box
{
    margin:0px;
    border:solid 2px red;
    height:100%;
}

Working Sample (tested on FF4)